@transferwise/components 46.49.0 → 46.50.1

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -6,6 +6,8 @@ import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
+import { useContext } from 'react';
+import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -30,9 +32,14 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
 }) => {
   const { locale, formatMessage } = useIntl();
 
+  const overlayId = useContext(OverlayIdContext);
+
   return (
     <>
       <button
+        aria-haspopup="dialog"
+        aria-expanded={overlayId != null}
+        aria-controls={overlayId}
         className={`btn btn-${size} btn-input np-date-trigger`}
         disabled={disabled}
         type="button"

package/src/drawer/Drawer.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
-import { useId } from 'react';
+import { useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
@@ -42,10 +43,13 @@ export default function Drawer({
   const { isMobile } = useLayout();
   const titleId = useId();
 
+  const overlayId = useContext(OverlayIdContext);
+
   return (
     <Dimmer open={open} onClose={onClose}>
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
         <div
+          id={overlayId}
           role="dialog"
           aria-modal
           aria-labelledby={headerTitle ? titleId : undefined}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -71,7 +71,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               style="width: 50%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -107,7 +107,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>
@@ -187,7 +187,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               style="width: 0%;"
             />
           </div>
-          <ul
+          <ol
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
@@ -223,7 +223,7 @@ exports[`FlowNavigation renders as expected 1`] = `
                 label-2
               </span>
             </li>
-          </ul>
+          </ol>
         </div>
       </div>
     </div>

package/src/i18n/de.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
+  "neptune.SelectOption.action.label": "Auswählen",
+  "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
+  "neptune.SelectOption.action.label": "Elegir",
+  "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
+  "neptune.SelectOption.action.label": "Sélectionner",
+  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
+  "neptune.SelectOption.action.label": "Kiválasztás",
+  "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
+  "neptune.SelectOption.action.label": "Pilih",
+  "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
+  "neptune.SelectOption.action.label": "Scegli",
+  "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
+  "neptune.SelectOption.action.label": "選択してください",
+  "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
+  "neptune.SelectOption.action.label": "Wybierz",
+  "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",

package/src/i18n/ro.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
+  "neptune.SelectOption.action.label": "Alege",
+  "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",

package/src/i18n/ru.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
+  "neptune.SelectOption.action.label": "Выбрать",
+  "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",

package/src/i18n/th.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
+  "neptune.SelectOption.action.label": "เลือก",
+  "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
   "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
   "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
   "neptune.Summary.statusPending": "รายการที่รอดำเนินการ",

package/src/i18n/tr.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
+  "neptune.SelectOption.action.label": "Seç",
+  "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",

package/src/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.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 {
+.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: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   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 {
+.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 {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.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 + .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 {
+.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-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.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 {
+.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 {
+.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--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/src/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode, useId, useRef } from 'react';
+import { ReactNode, useContext, useId, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -21,6 +21,7 @@ import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
 import Drawer from '../drawer';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import Title from '../title/Title';
 
 const TRANSITION_DURATION_IN_MILLISECONDS = 150;
@@ -61,6 +62,8 @@ const Modal = ({
   const contentReference = useRef<HTMLDivElement>(null);
   const titleId = useId();
 
+  const overlayId = useContext(OverlayIdContext);
+
   return !isMedium ? (
     <Drawer
       open={open}
@@ -100,6 +103,7 @@ const Modal = ({
           {...otherProps}
         >
           <div
+            id={overlayId}
             role="dialog"
             aria-modal
             aria-labelledby={titleId}

package/src/provider/overlay/OverlayIdProvider.tsx

@@ -0,0 +1,15 @@
+import { createContext, useId } from 'react';
+
+export const OverlayIdContext = createContext<string | undefined>(undefined);
+
+export type OverlayIdProviderProps = {
+  open: boolean;
+  children?: React.ReactNode;
+};
+
+export const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {
+  const id = useId();
+  return (
+    <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>
+  );
+};

package/src/stepper/Stepper.less

@@ -79,7 +79,7 @@
 
 .progress-bar {
   .float(left);
-  
+
   -webkit-backface-visibility: hidden;
   height: 100%;
   background-color: var(--color-interactive-primary);
@@ -87,7 +87,7 @@
   border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-  
+
   &::after {
     .float(right);
 

package/src/stepper/Stepper.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Recipient', onClick: fn() },
+  { label: 'Smellification', onClick: fn() },
+  { label: 'Battle', onClick: fn() },
+];
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Basic: Story = {
+  render: ({ activeStep, steps }) => {
+    return <Stepper activeStep={activeStep} steps={steps} />;
+  },
+  args: {
+    activeStep: 2,
+    steps: STEPS,
+  },
+};

package/src/stepper/Stepper.tsx

@@ -23,7 +23,10 @@ export interface StepperProps {
   className?: string;
 }
 
-/* eslint-disable react/no-array-index-key */
+/**
+ * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
+ * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
+ */
 const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   const { isRTL } = useDirection();
 
@@ -50,6 +53,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
     ) : (
       <span className="tw-stepper__step-label">{step.label}</span>
     );
+
     return (
       <li
         key={index}
@@ -83,10 +87,10 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
       <div className="progress">
         <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
       </div>
-      <ul className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ul>
+
+      <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>
   );
 };
-/* eslint-enable react/no-array-index-key */
 
 export default Stepper;

package/src/uploadInput/uploadButton/UploadButton.css

@@ -37,3 +37,8 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}

package/src/uploadInput/uploadButton/UploadButton.less

@@ -47,3 +47,9 @@
     align-items: flex-start;
   }
 }
+
+.np-upload-icon{
+  @media (max-width: 320px) {
+    padding-left: 0;
+  }
+}

package/src/uploadInput/uploadItem/UploadItem.css

@@ -3,9 +3,9 @@
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.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 {
+.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: absolute;
   height: 1px;
@@ -17,27 +17,27 @@
   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 {
+.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 {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.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 + .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 {
+.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-button-container:hover:before,
@@ -52,38 +52,41 @@
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.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 {
+.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 {
+.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--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;