@transferwise/components 0.0.0-experimental-3b84ee4 → 0.0.0-experimental-8a06fb3

package/build/main.css

@@ -1494,7 +1494,7 @@ button.np-option {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-select-option-placeholder:hover {
+.np-select-option-placeholder:not(.disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
 .np-select-option-placeholder:focus,
@@ -5444,6 +5444,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
+}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -5454,6 +5457,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;
@@ -5521,8 +5525,25 @@ label.np-upload-button:not(.disabled):active {
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
+  list-style: none;
   padding-left: 0;
-  list-style-position: inside;
+}
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
+  position: absolute;
+  display: block;
+  left: 0;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
@@ -5541,30 +5562,49 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  position: relative;
 }
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   display: block;
-  position: relative;
+  position: absolute;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  margin: 0 16px;
-  margin: 0 var(--size-16);
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+  top: 0;
+}
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+  bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  border-top: 1px;
+}
+.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+  display: none;
 }
-.np-upload-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5581,17 +5621,29 @@ label.np-upload-button:not(.disabled):active {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
+.np-upload-item__link a:hover:before {
+  display: none !important;
+}
+.np-upload-item__link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
+}
+.np-upload-item__link a:hover .np-upload-button,
+.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -5616,6 +5668,7 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);

package/build/styles/main.css

@@ -1494,7 +1494,7 @@ button.np-option {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-select-option-placeholder:hover {
+.np-select-option-placeholder:not(.disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
 .np-select-option-placeholder:focus,
@@ -5444,6 +5444,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
+}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -5454,6 +5457,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;
@@ -5521,8 +5525,25 @@ label.np-upload-button:not(.disabled):active {
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
+  list-style: none;
   padding-left: 0;
-  list-style-position: inside;
+}
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
+  position: absolute;
+  display: block;
+  left: 0;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
@@ -5541,30 +5562,49 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  position: relative;
 }
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   display: block;
-  position: relative;
+  position: absolute;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  margin: 0 16px;
-  margin: 0 var(--size-16);
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+  top: 0;
+}
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+  bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  border-top: 1px;
+}
+.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+  display: none;
 }
-.np-upload-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5581,17 +5621,29 @@ label.np-upload-button:not(.disabled):active {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
+.np-upload-item__link a:hover:before {
+  display: none !important;
+}
+.np-upload-item__link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
+}
+.np-upload-item__link a:hover .np-upload-button,
+.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -5616,6 +5668,7 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);

package/build/styles/selectOption/SelectOption.css

@@ -8,7 +8,7 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-select-option-placeholder:hover {
+.np-select-option-placeholder:not(.disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
 .np-select-option-placeholder:focus,

package/build/styles/uploadInput/UploadInput.css

@@ -50,8 +50,25 @@
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
+  list-style: none;
   padding-left: 0;
-  list-style-position: inside;
+}
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
+  position: absolute;
+  display: block;
+  left: 0;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;

package/build/styles/uploadInput/uploadButton/UploadButton.css

@@ -8,6 +8,9 @@
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
+}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -18,6 +21,7 @@
 }
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;

package/build/styles/uploadInput/uploadItem/UploadItem.css

@@ -1,30 +1,49 @@
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  position: relative;
 }
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   display: block;
-  position: relative;
+  position: absolute;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  margin: 0 16px;
-  margin: 0 var(--size-16);
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+  top: 0;
+}
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+  bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  border-top: 1px;
+}
+.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+  display: none;
 }
-.np-upload-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -41,17 +60,29 @@
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
+.np-upload-item__link a:hover:before {
+  display: none !important;
+}
+.np-upload-item__link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
+}
+.np-upload-item__link a:hover .np-upload-button,
+.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -76,6 +107,7 @@
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);

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":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,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,+BAmBlB"}

package/build/types/selectOption/SelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAwGtB"}
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAuGtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3b84ee4",
+  "version": "0.0.0-experimental-8a06fb3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/inlineAlert/InlineAlert.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';

package/src/main.css

@@ -1494,7 +1494,7 @@ button.np-option {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-select-option-placeholder:hover {
+.np-select-option-placeholder:not(.disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
 .np-select-option-placeholder:focus,
@@ -5444,6 +5444,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
+}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -5454,6 +5457,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;
@@ -5521,8 +5525,25 @@ label.np-upload-button:not(.disabled):active {
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
+  list-style: none;
   padding-left: 0;
-  list-style-position: inside;
+}
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
+  position: absolute;
+  display: block;
+  left: 0;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
@@ -5541,30 +5562,49 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  position: relative;
 }
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
   display: block;
-  position: relative;
+  position: absolute;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  margin: 0 16px;
-  margin: 0 var(--size-16);
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
+.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+  top: 0;
+}
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+  bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  border-top: 1px;
+}
+.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
+.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+  display: none;
 }
-.np-upload-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5581,17 +5621,29 @@ label.np-upload-button:not(.disabled):active {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
+.np-upload-item__link a:hover:before {
+  display: none !important;
+}
+.np-upload-item__link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
+}
+.np-upload-item__link a:hover .np-upload-button,
+.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -5616,6 +5668,7 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);

package/src/selectOption/SelectOption.css

@@ -8,7 +8,7 @@
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-select-option-placeholder:hover {
+.np-select-option-placeholder:not(.disabled):hover {
   background-color: var(--color-background-neutral-hover);
 }
 .np-select-option-placeholder:focus,

package/src/selectOption/SelectOption.less

@@ -7,7 +7,7 @@
   &-placeholder {
     background-color: var(--color-background-neutral);
 
-    &:hover {
+    &:not(.disabled):hover {
       background-color: var(--color-background-neutral-hover);
     }