@transferwise/components 43.13.14 → 43.13.15

package/build/styles/uploadInput/UploadInput.css

@@ -1 +1 @@
-.np-upload-input{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:10px;border-radius:var(--radius-small)}.np-upload-input:has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-upload-input.form-control{height:auto;padding:initial}.np-theme-personal .np-upload-input{border-radius:10px;border-radius:var(--radius-small);min-height:80px}.np-theme-personal .np-upload-input.disabled .btn{cursor:inherit}.np-theme-personal .np-upload-input .np-upload-button{border-radius:10px;border-radius:var(--radius-small);border-radius:inherit;padding:16px;padding:var(--padding-small)}.np-theme-personal .np-upload-input .np-upload-item__remove-button{border-radius:unset}.np-theme-personal .np-upload-input .np-upload-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-upload-input .media-body{color:var(--color-content-link);white-space:break-spaces}.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold{text-decoration:underline;text-underline-offset:.3em}.np-theme-personal .np-upload-input .media-body .np-text-body-default,.np-theme-personal .np-upload-input .media-body .np-upload-description,.np-theme-personal .np-upload-input .media-body .text-positive{color:#5d7079!important;color:var(--color-content-secondary)!important}.np-theme-personal .np-upload-input .media-body .text-negative{color:var(--color-sentiment-negative)!important}.np-theme-personal .np-upload-input .status-circle{height:24px;height:var(--size-x-small);width:24px;width:var(--size-x-small)}
+.np-upload-input{border:1px solid #c9cbce;border:1px solid var(--color-interactive-secondary);border-radius:10px;border-radius:var(--radius-small)}.np-upload-input:has(:focus-visible){outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-upload-input.form-control{height:auto;padding:initial}.np-theme-personal .np-upload-input{border-radius:10px;border-radius:var(--radius-small);min-height:78px}.np-theme-personal .np-upload-input.disabled .btn{cursor:inherit}.np-theme-personal .np-upload-input .np-upload-button{border-radius:9px;border-radius:calc(var(--radius-small) - 1px);padding:16px;padding:var(--padding-small)}.np-theme-personal .np-upload-input .np-upload-input--square-top{border-top-left-radius:0;border-top-right-radius:0}.np-theme-personal .np-upload-input .np-upload-item__remove-button{border-radius:unset}.np-theme-personal .np-upload-input .np-upload-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-upload-input .media-body{color:var(--color-content-link);white-space:break-spaces}.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold{text-decoration:underline;text-underline-offset:.3em}.np-theme-personal .np-upload-input .media-body .np-text-body-default,.np-theme-personal .np-upload-input .media-body .np-upload-description,.np-theme-personal .np-upload-input .media-body .text-positive{color:#5d7079!important;color:var(--color-content-secondary)!important}.np-theme-personal .np-upload-input .media-body .text-negative{color:var(--color-sentiment-negative)!important}.np-theme-personal .np-upload-input .status-circle{height:24px;height:var(--size-x-small);width:24px;width:var(--size-x-small)}

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

@@ -1 +1 @@
-.np-upload-button{border:0!important;padding:12px 16px;padding:var(--size-12) var(--size-16);width:100%}.np-upload-button.np-upload-accent{color:#00a2dd;color:var(--color-interactive-accent)}label.np-upload-button:not(.disabled):active,label.np-upload-button:not(.disabled):focus-visible,label.np-upload-button:not(.disabled):hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-theme-personal label.np-upload-button:not(.disabled):active,.np-theme-personal label.np-upload-button:not(.disabled):focus-visible,.np-theme-personal label.np-upload-button:not(.disabled):hover{background-color:var(--color-background-screen-hover)}.np-theme-personal .disabled label.np-upload-button:not(.disabled):active,.np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,.np-theme-personal .disabled label.np-upload-button:not(.disabled):hover{background-color:transparent}.np-upload-button .np-upload-icon{align-items:center;display:flex}.np-upload-button-container.droppable{border:0}.np-upload-button-container .droppable-card-content{display:flex}.np-upload-button-container input[type=file]{opacity:0;position:absolute;z-index:-1}.np-upload-button-container input[type=file]:focus-visible+label{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}
+.np-upload-button{border:0!important;padding:12px 16px;padding:var(--size-12) var(--size-16);width:100%}.np-upload-button.np-upload-accent{color:#00a2dd;color:var(--color-interactive-accent)}label.np-upload-button:not(.disabled):active,label.np-upload-button:not(.disabled):focus-visible,label.np-upload-button:not(.disabled):hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-theme-personal label.np-upload-button:not(.disabled):active,.np-theme-personal label.np-upload-button:not(.disabled):focus-visible,.np-theme-personal label.np-upload-button:not(.disabled):hover{background-color:var(--color-background-screen-hover)}.np-theme-personal .disabled label.np-upload-button:not(.disabled):active,.np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,.np-theme-personal .disabled label.np-upload-button:not(.disabled):hover{background-color:transparent}.np-upload-button .np-upload-icon{align-items:center;display:flex}.np-upload-button-container.droppable{border:0}.np-upload-button-container .droppable-card-content{display:flex}.np-theme-personal .np-upload-button-container .droppable-card-content{border-radius:9px;border-radius:calc(var(--radius-small) - 1px)}.np-upload-button-container input[type=file]{opacity:0;position:absolute;z-index:-1}.np-upload-button-container input[type=file]:focus-visible+label{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}

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

@@ -1 +1 @@
-.np-upload-item:not(:last-child):after{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);content:" ";display:block;margin:0 16px;margin:0 var(--size-16);position:relative}.np-upload-item__link a{flex:1;outline:none;text-decoration:none}.np-upload-item__link a:active,.np-upload-item__link a:focus-visible,.np-upload-item__link a:hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral);text-decoration:none}.np-upload-item__link a:active~.np-upload-item__remove-button,.np-upload-item__link a:focus-visible~.np-upload-item__remove-button,.np-upload-item__link a:hover~.np-upload-item__remove-button{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-upload-item__body{align-items:center;display:flex;justify-content:space-between}.np-upload-item__remove-button{align-self:stretch;background:transparent;color:#c9cbce;color:var(--color-interactive-secondary);flex-shrink:0;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-upload-item__remove-button:focus,.np-upload-item__remove-button:hover{color:#d03238!important;color:var(--color-interactive-negative-hover)!important}
+.np-upload-item:not(:last-child):after{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);content:" ";display:block;margin:0 16px;margin:0 var(--size-16);position:relative}.np-theme-personal .np-upload-item:first-child a:active,.np-theme-personal .np-upload-item:first-child a:focus-visible,.np-theme-personal .np-upload-item:first-child a:hover{border-top-left-radius:9px;border-top-left-radius:calc(var(--radius-small) - 1px)}.np-theme-personal .np-upload-item:first-child a:active~.np-upload-item__remove-button,.np-theme-personal .np-upload-item:first-child a:focus-visible~.np-upload-item__remove-button,.np-theme-personal .np-upload-item:first-child a:hover~.np-upload-item__remove-button{border-top-right-radius:9px;border-top-right-radius:calc(var(--radius-small) - 1px)}.np-upload-item__link a{border-bottom-right-radius:0;border-top-right-radius:0;flex:1;outline:none;text-decoration:none}.np-theme-personal .np-upload-item__link a{border-radius:unset}.np-upload-item__link a.np-upload-item--single-file{border-bottom-left-radius:9px;border-bottom-left-radius:calc(var(--radius-small) - 1px)}.np-upload-item__link a:active,.np-upload-item__link a:focus-visible,.np-upload-item__link a:hover{background-color:#86a7bd1a;background-color:var(--color-background-neutral);text-decoration:none}.np-upload-item__link a:active~.np-upload-item__remove-button,.np-upload-item__link a:focus-visible~.np-upload-item__remove-button,.np-upload-item__link a:hover~.np-upload-item__remove-button{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file{border-bottom-right-radius:9px;border-bottom-right-radius:calc(var(--radius-small) - 1px)}.np-upload-item__body{align-items:center;display:flex;justify-content:space-between}.np-upload-item__remove-button{align-self:stretch;background:transparent;color:#c9cbce;color:var(--color-interactive-secondary);flex-shrink:0;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-upload-item__remove-button:focus,.np-upload-item__remove-button:hover{color:#d03238!important;color:var(--color-interactive-negative-hover)!important}

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

@@ -40,10 +40,14 @@ export type UploadButtonProps = {
      * Title for the upload button
      */
     uploadButtonTitle?: string;
+    /**
+     * Are there any uploaded items on a multiple-file upload? Used for calculating border radiuses
+     */
+    multipleFileInputWithFilesAdded: boolean;
 };
 export declare enum TEST_IDS {
     uploadInput = "uploadInput",
     mediaBody = "mediaBody"
 }
-declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, }: UploadButtonProps) => JSX.Element;
+declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, multipleFileInputWithFilesAdded, }: UploadButtonProps) => JSX.Element;
 export default UploadButton;

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

@@ -2,6 +2,10 @@
 import { UploadedFile } from '../types';
 export type UploadItemProps = JSX.IntrinsicAttributes & {
     file: UploadedFile;
+    /**
+     * Is this Item part of a multiple- or single-file UploadInput
+     */
+    singleFileUpload: boolean;
     canDelete: boolean;
     onDelete: () => void;
     /**
@@ -16,5 +20,5 @@ export declare enum TEST_IDS {
     uploadItem = "uploadItem",
     mediaBody = "mediaBody"
 }
-declare const UploadItem: ({ file, canDelete, onDelete, onDownload }: UploadItemProps) => JSX.Element;
+declare const UploadItem: ({ file, canDelete, onDelete, onDownload, singleFileUpload, }: UploadItemProps) => JSX.Element;
 export default UploadItem;

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

@@ -2,6 +2,7 @@ import { PropsWithChildren, MouseEvent } from 'react';
 type UploadItemLinkProps = PropsWithChildren<{
     url?: string;
     onDownload?: (event: MouseEvent) => void;
+    singleFileUpload: boolean;
 }>;
-export declare const UploadItemBody: ({ children, url, onDownload }: UploadItemLinkProps) => JSX.Element;
+export declare const UploadItemBody: ({ children, url, onDownload, singleFileUpload, }: UploadItemLinkProps) => JSX.Element;
 export {};