@transferwise/components 0.0.0-experimental-438bbba → 0.0.0-experimental-cf33ac7

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

@@ -1,44 +1,91 @@
-.np-upload-button-container {
-  border-style: solid;
-}
-.np-upload-button-container .droppable-card-content {
+.np-upload-input__upload-button {
+  position: relative;
+  padding: 16px;
+  padding: var(--size-16);
   display: flex;
+  align-items: center;
+  margin: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
+  border: var(--outerBorder);
+  cursor: pointer;
+}
+.np-upload-input__upload-button .np-upload-input__title {
+  color: var(--color-content-link);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
+}
+.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  line-height: 22px;
 }
-.np-upload-button-container.droppable-dropping {
-  border-color: #c9cbce !important;
-  border-color: var(--color-interactive-secondary) !important;
+.np-upload-input__upload-button .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-upload-button-container.droppable-dropping:before {
-  z-index: 2;
+.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
+.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
+  display: none;
 }
-.np-upload-button-container input[type="file"] {
+.np-upload-input__upload-button:focus-within,
+.np-upload-input__upload-button:focus-visible {
+  outline: var(--ring-outline-color) solid 3px;
+  outline-offset: -3px;
+}
+.np-upload-input__upload-button-input {
+  position: absolute;
   opacity: 0;
   z-index: -1;
-  position: absolute;
 }
-.np-upload-button-container .np-upload-button {
-  border: none;
+.np-upload-input__upload-button-input:focus {
+  outline: none;
 }
-.np-upload-button {
-  width: 100%;
-  border-top: 1px solid transparent;
-  padding: 16px;
-  padding: var(--padding-small);
-  border-radius: 0;
+.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
+  display: flex;
+  flex: 1;
+  padding: 13px 0 !important;
+  background-color: transparent;
+  transition: transform 0.3s ease;
+  position: relative;
 }
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
+.np-upload-input__upload-button--with-entries {
+  border-top-width: 0;
 }
-.disabled label.np-upload-button:not(.disabled):hover,
-.disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
+.np-upload-input__upload-button--with-entries:before {
+  display: block;
+  position: absolute;
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  content: " ";
+  left: 16px;
+  left: var(--size-16);
+  width: calc(100% - 2 * 16px);
+  width: calc(100% - 2 * var(--size-16));
+  top: 0;
+}
+.np-upload-input__upload-button--without-entries {
+  border-top: var(--outerBorder);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
-.np-upload-button .media {
-  align-items: flex-start;
+.np-upload-input__upload-button--enabled.is-dropping,
+.np-upload-input__upload-button--enabled:hover,
+.np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+}
+.np-upload-input__upload-button--enabled.is-dropping:before,
+.np-upload-input__upload-button--enabled:hover:before,
+.np-upload-input__upload-button--enabled:active:before {
+  width: 100%;
+  left: 0;
 }
-@media (max-width: 320px) {
-  .np-upload-icon {
-    padding-left: 0;
-  }
+.np-upload-input__upload-button--disabled {
+  cursor: inherit;
 }

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

@@ -1,144 +1,165 @@
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
+.np-upload-input__item {
   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 {
+  padding: 16px;
+  padding: var(--size-16);
+  display: flex;
+  align-items: flex-start;
+  border-left: var(--outerBorder);
+  border-right: var(--outerBorder);
+}
+.np-upload-input__item:first-child {
+  border-top: var(--outerBorder);
+  border-top-left-radius: 10px;
+  border-top-left-radius: var(--radius-small);
+  border-top-right-radius: 10px;
+  border-top-right-radius: var(--radius-small);
+}
+.np-upload-input__item + .np-upload-input__item:before {
+  content: " ";
   display: block;
   position: absolute;
   height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
-  content: " ";
   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;
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-border-neutral);
 }
-.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-input__item .np-upload-input__item-content {
+  padding-right: 32px;
+  padding-right: var(--size-32);
+  flex: 1;
 }
-.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);
+@media (max-width: 320px) {
+  .np-upload-input__item .np-upload-input__item-content {
+    padding-right: 64px;
+    padding-right: var(--size-64);
+  }
 }
-.np-upload-item:not(:last-child) {
-  border-bottom: 0;
+.np-upload-input__item .np-upload-input__title,
+.np-upload-input__item .np-upload-input__text {
+  margin: 0;
+  -moz-text-align-last: left;
+       text-align-last: left;
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.np-upload-input__item .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+.np-upload-input__item .np-upload-input__item-link,
+.np-upload-input__item .np-upload-input__item-container {
+  align-items: flex-start;
+  display: flex;
+  width: 100%;
 }
-.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-input__item .np-upload-input__item-action {
+  --iconSize: var(--size-24);
+  --clickArea: 44px;
+  --buttonTopRightOffset: var(--size-16);
+  --clickAreaTopRightOffset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
+  position: absolute;
+  right: 16px;
+  right: var(--buttonTopRightOffset);
+  top: 16px;
+  top: var(--buttonTopRightOffset);
 }
-.np-upload-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !important;
+@media (max-width: 320px) {
+  .np-upload-input__item .np-upload-input__item-action {
+    --iconSize: var(--size-48);
+    --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
+  }
 }
-.np-upload-button-container:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  border-color: transparent;
-  outline-offset: -3px;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: var(--iconSize);
+  width: var(--iconSize);
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  border-radius: 50%;
+  border: 0;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  transition: color, background-color 0.15s ease-in-out;
+  outline-offset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.np-upload-item--single-file:focus-visible,
-.np-upload-item__link:focus-visible,
-.np-upload-button-container:has(:focus-visible) {
-  outline-width: 3px;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
+  content: '';
+  display: block;
+  width: var(--clickArea);
+  height: var(--clickArea);
+  border-radius: 50%;
+  position: absolute;
+  top: var(--clickAreaTopRightOffset);
+  right: var(--clickAreaTopRightOffset);
 }
-.np-upload-item--link a {
-  flex: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-top: 1px solid transparent;
-  border-radius: inherit;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
 }
-.np-upload-item--link a:focus-visible {
-  outline-offset: -2px;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: var(--color-background-neutral-active);
 }
-.np-upload-item--link a:hover:before {
-  display: none !important;
+.np-upload-input__item.is-interactive {
+  padding: 0;
 }
-.np-upload-item--link a:hover:after {
-  left: 0 !important;
-  width: 100% !important;
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)):before,
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__item:before {
+  width: 100%;
+  left: 0;
 }
-.np-upload-item--link a:hover,
-.np-upload-item--link a:active {
+.np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
+  padding: var(--size-16);
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-radius: inherit;
+  border-top: 1px solid transparent;
+  background-clip: padding-box;
+}
+.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
+  outline-offset: -2px;
+  outline-width: 3px;
 }
-.np-upload-item--link a:hover .np-upload-button,
-.np-upload-item--link a:active .np-upload-button {
+.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
+.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
   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-input__item.is-interactive:first-child .np-upload-input__item-link {
+  border-top-width: 0;
 }
-.np-upload-item__body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.np-upload-input__item .np-upload-input-errors {
+  padding-left: 0;
+  list-style-type: "";
+}
+.np-upload-input__item .np-upload-input-errors > li {
   position: relative;
-  border-radius: inherit;
+  padding-left: 16px;
+  padding-left: var(--size-16);
 }
-.np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+.np-upload-input__item .np-upload-input-errors > li::before {
+  content: '•';
   position: absolute;
-  height: 24px;
-  height: var(--size-24);
-  min-height: 0;
-  width: 24px;
-  width: var(--size-24);
-  padding: 0;
-  border-radius: 50% !important;
-  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);
-  top: 16px;
-  top: var(--size-16);
-  transition: color, background-color 0.15s ease-in-out;
+  display: block;
+  left: 0;
 }
 @media (max-width: 320px) {
-  .np-upload-item__remove-button {
-    top: 16px;
-    top: var(--size-16);
-    right: 16px;
-    right: var(--size-16);
-    height: 48px;
-    height: var(--size-48);
-    width: 48px;
-    width: var(--size-48);
+  .np-upload-input__item .np-upload-input-errors > li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
   }
 }
-.np-upload-item__remove-button:hover {
-  background-color: var(--color-sentiment-negative);
-  color: var(--color-contrast-overlay) !important;
-}
-.np-upload-item__remove-button:before {
-  display: block;
-  width: 44px;
-  height: 44px;
-  content: '';
-  border-radius: 50%;
-  position: absolute;
-}

package/build/types/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/card/Card.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,+FAuER,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/card/Card.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,+FAsER,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/build/types/circularButton/CircularButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAE9D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAC9E;AAED,QAAA,MAAM,cAAc,qEAQjB,mBAAmB,gCAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAe,MAAM,WAAW,CAAC;AAE/D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAC9E;AAED,QAAA,MAAM,cAAc,qEAQjB,mBAAmB,gCAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/instructionsList/InstructionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAC7C,CACI;IACE,GAAG,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,GACD;IACE,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,oCAAkD,qBAAqB,gCA2B5F,CAAC;AAmBF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAC7C,CACI;IACE,GAAG,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,GACD;IACE,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,oCAAkD,qBAAqB,gCA2B5F,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}

package/build/types/uploadInput/UploadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAYd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCA+RlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GACC,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GACnC,WAAW,CAAC;AAQd,QAAA,MAAM,WAAW,uQAoBd,gBAAgB,gCAwQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/uploadInput/uploadButton/UploadButton.d.ts

@@ -5,6 +5,11 @@ export type UploadButtonProps = {
      * Disable the upload button if your app is not yet ready to accept uploads
      */
     disabled?: boolean;
+    /**
+     * Should be true, if the UploadInput has at least 1
+     * file (valid or invalid) listed.
+     */
+    withEntries?: boolean;
     /**
      * Allow multiple file uploads
      */
@@ -44,6 +49,6 @@ export declare enum TEST_IDS {
     uploadInput = "uploadInput",
     mediaBody = "mediaBody"
 }
-declare const UploadButton: import("react").ForwardRefExoticComponent<UploadButtonProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const UploadButton: ({ disabled, withEntries, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, }: UploadButtonProps) => import("react").JSX.Element;
 export default UploadButton;
 //# sourceMappingURL=UploadButton.d.ts.map

package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAMpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,gHAwKjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAMpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,uHAWf,iBAAiB,gCA6JnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItem.d.ts

@@ -14,15 +14,11 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
      * @param file
      */
     onDownload?: (file: UploadedFile) => void;
-    ref?: React.Ref<UploadItemRef>;
 };
-interface UploadItemRef {
-    focus: () => void;
-}
 export declare enum TEST_IDS {
     uploadItem = "uploadItem",
     mediaBody = "mediaBody"
 }
-declare const UploadItem: import("react").ForwardRefExoticComponent<Omit<UploadItemProps, "ref"> & import("react").RefAttributes<UploadItemRef>>;
+declare const UploadItem: ({ file, canDelete, onDelete, onDownload, singleFileUpload, }: UploadItemProps) => import("react").JSX.Element;
 export default UploadItem;
 //# sourceMappingURL=UploadItem.d.ts.map

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AAEF,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,wHAmJf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCA8HjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts

@@ -1,9 +1,9 @@
-import { MouseEvent } from 'react';
-export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
+import { PropsWithChildren, MouseEvent } from 'react';
+type UploadItemLinkProps = PropsWithChildren<{
     url?: string;
     onDownload?: (event: MouseEvent) => void;
     singleFileUpload: boolean;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+}>;
+export declare const UploadItemLink: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => import("react").JSX.Element;
+export {};
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAc,MAAM,OAAO,CAAC;AASlE,eAAO,MAAM,cAAc;UALnB,MAAM;iBACC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;sBACtB,OAAO;;;sEAyB1B,CAAC"}
+{"version":3,"file":"UploadItemLink.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAmBrB,CAAC"}

package/build/uploadInput/UploadInput.js

@@ -53,11 +53,9 @@ const UploadInput = ({
   const {
     formatMessage
   } = reactIntl.useIntl();
-  const itemRefs = React.useRef([]);
-  const uploadInputRef = React.useRef(null);
   const PROGRESS_STATUSES = new Set([status.Status.PENDING, status.Status.PROCESSING]);
   const [uploadedFiles, setUploadedFiles] = React.useState(multiple || files.length === 0 ? files : [files[0]]);
-  const uploadedFilesListReference = React.useRef([...(multiple || files.length === 0 ? files : [files[0]])]);
+  const uploadedFilesListReference = React.useRef(multiple || files.length === 0 ? files : [files[0]]);
   function addFileToList(recentUploadedFile) {
     function addToList(listToAddTo) {
       return [...listToAddTo, recentUploadedFile];
@@ -82,15 +80,6 @@ const UploadInput = ({
     setUploadedFiles(updateListItem);
     uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
   };
-  const manageFocusAfterRemoval = React.useCallback(file => {
-    const index = uploadedFiles.findIndex(f => f.id === file.id);
-    const nextFocusIndex = uploadedFiles.length > 1 ? index === uploadedFiles.length - 1 ? index - 1 : index + 1 : -1;
-    if (nextFocusIndex >= 0 && itemRefs.current[nextFocusIndex]) {
-      itemRefs.current[nextFocusIndex].focus();
-    } else if (uploadInputRef.current) {
-      uploadInputRef.current.focus();
-    }
-  }, [uploadedFiles, itemRefs, uploadInputRef]);
   const removeFile = file => {
     const {
       id,
@@ -99,7 +88,6 @@ const UploadInput = ({
     if (status$1 === status.Status.FAILED) {
       // If removing a failed upload, we're just updating the view
       removeFileFromList(file);
-      manageFocusAfterRemoval(file);
     } else if (onDeleteFile && id) {
       // Set status to PROCESSING
       modifyFileInList(file, {
@@ -107,14 +95,10 @@ const UploadInput = ({
         error: undefined
       });
       // Notify host app about deletion
-      onDeleteFile(id).then(() => {
-        removeFileFromList(file);
-      }).catch(error => {
+      onDeleteFile(id).then(() => removeFileFromList(file)).catch(error => {
         modifyFileInList(file, {
           error: error
         });
-      }).finally(() => {
-        manageFocusAfterRemoval(file);
       });
     }
   };
@@ -225,26 +209,32 @@ const UploadInput = ({
         disabled
       }),
       ...inputAttributes,
-      children: [uploadedFiles.map((file, index) => /*#__PURE__*/jsxRuntime.jsx(UploadItem.default, {
-        ref: el => {
-          itemRefs.current[index] = el;
-        },
-        file: file,
-        singleFileUpload: !multiple,
-        canDelete: (!!onDeleteFile || file.status === status.Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
-        onDelete: file.status === status.Status.FAILED ? () => removeFile(file) : () => setMarkedFileForDelete(file),
-        onDownload: onDownload
-      }, file.id)), (multiple || !multiple && !uploadedFiles.length) && /*#__PURE__*/jsxRuntime.jsx(UploadButton.default, {
-        ref: uploadInputRef,
-        id: id,
-        uploadButtonTitle: uploadButtonTitle,
-        disabled: areMaximumFilesUploadedAlready() || disabled,
-        multiple: multiple,
-        fileTypes: fileTypes,
-        sizeLimit: sizeLimit,
-        description: description,
-        maxFiles: maxFiles,
-        onChange: addFiles
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-upload-input__section",
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        role: "region",
+        children: uploadedFiles.map(file => /*#__PURE__*/jsxRuntime.jsx(UploadItem.default, {
+          file: file,
+          singleFileUpload: !multiple,
+          canDelete: (!!onDeleteFile || file.status === status.Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
+          onDelete: file.status === status.Status.FAILED ? () => removeFile(file) : () => setMarkedFileForDelete(file),
+          onDownload: onDownload
+        }, file.id))
+      }), (multiple || !multiple && !uploadedFiles.length) && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-upload-input__section np-upload-input__section--uploader",
+        children: /*#__PURE__*/jsxRuntime.jsx(UploadButton.default, {
+          id: id,
+          uploadButtonTitle: uploadButtonTitle,
+          disabled: areMaximumFilesUploadedAlready() || disabled,
+          multiple: multiple,
+          fileTypes: fileTypes,
+          sizeLimit: sizeLimit,
+          description: description,
+          maxFiles: maxFiles,
+          withEntries: Boolean(uploadedFiles.length),
+          onChange: addFiles
+        })
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Modal, {
       title: deleteConfirm?.title !== undefined ? deleteConfirm.title : formatMessage(UploadInput_messages.deleteModalTitle),