@transferwise/components 46.41.0 → 46.42.0

package/build/main.css

@@ -5402,6 +5402,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;
@@ -5412,6 +5415,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;
@@ -5479,8 +5483,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;
@@ -5499,30 +5520,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);
@@ -5539,17 +5579,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;
@@ -5574,6 +5626,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

@@ -5402,6 +5402,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;
@@ -5412,6 +5415,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;
@@ -5479,8 +5483,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;
@@ -5499,30 +5520,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);
@@ -5539,17 +5579,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;
@@ -5574,6 +5626,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/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,+BAiBlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.41.0",
+  "version": "46.42.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,7 +93,7 @@
     "rollup": "^4.17.2",
     "storybook": "^8.1.10",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.11.0",
+    "@transferwise/neptune-css": "14.12.0",
     "@wise/components-theming": "1.3.0"
   },
   "peerDependencies": {

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';
@@ -27,12 +27,10 @@ export default function InlineAlert({
         className,
       )}
     >
-      <div className="d-inline-flex">
-        {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
-          <StatusIcon sentiment={type} size={Size.SMALL} />
-        )}
-        <div className="np-text-body-default">{children}</div>
-      </div>
+      {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
+        <StatusIcon sentiment={type} size={Size.SMALL} />
+      )}
+      <div className="np-text-body-default">{children}</div>
     </div>
   );
 }

package/src/main.css

@@ -5402,6 +5402,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;
@@ -5412,6 +5415,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;
@@ -5479,8 +5483,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;
@@ -5499,30 +5520,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);
@@ -5539,17 +5579,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;
@@ -5574,6 +5626,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/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/src/uploadInput/UploadInput.less

@@ -59,8 +59,24 @@
     }
 
     &-errors {
+      list-style: none;
       padding-left: 0;
-      list-style-position: inside;
+
+      li {
+        position: relative;
+        padding-left: var(--size-16);
+
+        @media (--screen-400-zoom) {
+          padding-left: var(--size-32);
+        }
+
+        &:before {
+          content: '•';
+          position: absolute;
+          display: block;
+          left: 0;
+        }
+      }
     }
 
     .status-circle {