@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

package/src/lib/components/input/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
 
 import styles from './style.module.scss';
 
@@ -7,53 +8,88 @@ import styles from './style.module.scss';
 export type InputProps = {
   error?: string;
   prefix?: string;
+  label?: string;
+  id?: string;
+  hideLabel?: boolean;
 } & Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
   Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>>;
 
 export default React.forwardRef(
   (
-    { className, placeholder, prefix, error, disabled, ...props }: InputProps,
+    {
+      className,
+      placeholder,
+      label,
+      id,
+      prefix,
+      error,
+      disabled,
+      hideLabel = false,
+      ...props
+    }: InputProps,
     ref?: React.ForwardedRef<HTMLInputElement>
-  ) => (
-    <div className={`${styles.container} ${className ?? ''}`}>
-      <input
-        data-testid="ds-input-input"
-        type="text"
-        ref={ref}
-        className={classnames(
-          error ? 'p-input--error' : 'p-input',
-          placeholder && placeholder.length > 0
-            ? styles.input
-            : styles['input--no-placeholder'],
-          { [styles['input--with-prefix']]: prefix }
+  ) => {
+    const [uniqueId] = useState(id ?? uuidv4());
+    return (
+      <div className={`${styles.container} ${className ?? ''}`}>
+        {label && (
+          <label
+            htmlFor={uniqueId}
+            className={classnames('p-p', styles.label, {
+              [styles['label--with-error']]: error,
+              'sr-only': hideLabel,
+            })}
+          >
+            {label}
+          </label>
         )}
-        placeholder=" "
-        disabled={disabled}
-        {...props}
-      />
-      {prefix && (
-        <span
-          className={classnames(
-            styles.prefix,
-            { [styles['prefix--with-error']]: error },
-            { [styles['prefix--disabled']]: disabled }
+        <div style={{ position: 'relative' }}>
+          <input
+            id={uniqueId}
+            data-testid="ds-input-input"
+            type="text"
+            ref={ref}
+            className={classnames(
+              error ? 'p-input--error' : 'p-input',
+              !label && placeholder && placeholder.length > 0
+                ? styles.input
+                : styles['input--no-placeholder'],
+              { [styles['input--with-prefix']]: prefix }
+            )}
+            placeholder={label ? placeholder : ' '}
+            disabled={disabled}
+            {...props}
+          />
+          {prefix && (
+            <span
+              className={classnames(
+                styles.prefix,
+                { [styles['prefix--with-error']]: error },
+                { [styles['prefix--disabled']]: disabled }
+              )}
+            >
+              {prefix}
+            </span>
           )}
-        >
-          {prefix}
-        </span>
-      )}
-      <span
-        className={classnames(
-          styles.placeholder,
-          { [styles['placeholder--with-prefix']]: prefix },
-          { [styles['placeholder--with-error']]: error }
+          {!label && (
+            <label
+              htmlFor={uniqueId}
+              className={classnames(
+                styles.placeholder,
+                { [styles['placeholder--with-prefix']]: prefix },
+                { [styles['placeholder--with-error']]: error }
+              )}
+            >
+              {placeholder}
+            </label>
+          )}
+        </div>
+        {error && (
+          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>
+            {error}
+          </p>
         )}
-      >
-        {placeholder}
-      </span>
-      {error && (
-        <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>{error}</p>
-      )}
-    </div>
-  )
+      </div>
+    );
+  }
 );

package/src/lib/components/input/style.module.scss

@@ -93,6 +93,16 @@
   }
 }
 
+.label {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: var(--ds-grey-600);
+
+  &--with-error {
+    color: var(--ds-red-500);
+  }
+}
+
 .error {
   margin-top: 4px;
 }

package/src/lib/components/modal/regularModal/index.tsx

@@ -36,19 +36,21 @@ export default ({
         } ${className}`}
         onClick={handleContainerClick}
       >
-        <div className={styles.header}>
-          <div className={`p-h2 ${styles.title}`}>{title}</div>
-          {dismissible && (
-            <button
-              type="button"
-              className={styles.close}
-              onClick={handleOnClose}
-            >
-              <img src={imageClose} alt="Close" />
-            </button>
-          )}
+        <div className={styles.body}>
+          <div className={styles.header}>
+            <div className={`p-h2 ${styles.title}`}>{title}</div>
+            {dismissible && (
+              <button
+                type="button"
+                className={styles.close}
+                onClick={handleOnClose}
+              >
+                <img src={imageClose} alt="Close" />
+              </button>
+            )}
+          </div>
+          {children}
         </div>
-        {children}
       </div>
     </div>
   );

package/src/lib/components/modal/regularModal/style.module.scss

@@ -22,12 +22,12 @@
 
 @keyframes appear-in {
   0% {
-    transform: translateY(24px) translateX(-50%);
+    transform: translateY(24px);
     opacity: 0;
     visibility: hidden;
   }
   100% {
-    transform: translateY(0) translateX(-50%);
+    transform: translateY(0);
     opacity: 1;
     visibility: visible;
   }
@@ -35,12 +35,12 @@
 
 @keyframes disappear-out {
   0% {
-    transform: translateY(0) translateX(-50%);
+    transform: translateY(0);
     opacity: 1;
     visibility: visible;
   }
   100% {
-    transform: translateY(24px) translateX(-50%);
+    transform: translateY(24px);
     opacity: 0;
     visibility: hidden;
   }
@@ -70,25 +70,20 @@
 .container {
   position: relative;
 
-  background-color: white;
-
-  border-radius: 8px;
+  display: flex;
+  align-items: center;
 
   max-width: 592px;
-  width: fit-content;
-  width: -moz-fit-content;
+  width: 100%;
+  min-height: 100%;
+
+  margin: 0 auto;
 
   animation-name: appear-in;
   animation-duration: 0.4s;
   animation-fill-mode: both;
   animation-timing-function: ease-out;
 
-  top: calc(100vh / 2 - 50% / 2);
-  left: 50%;
-  transform: translateX(-50%);
-
-  margin-bottom: 80px;
-
   &--close {
     @extend .container;
     animation-name: disappear-out;
@@ -99,6 +94,12 @@
   }
 }
 
+.body {
+  background-color: white;
+  border-radius: 8px;
+  margin: 32px auto;
+}
+
 .header {
   display: flex;
   justify-content: space-between;

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -3,71 +3,39 @@ import classnames from 'classnames';
 
 import styles from './style.module.scss';
 import icons from '../icons/index';
-import { UploadStatus, UploadedFile, FileType } from '..';
+import { UploadStatus, UploadedFile } from '../types';
 
-const getUploadingIcon = (type: FileType | string): string => {
-  switch (type) {
-    case 'heic':
-      return icons.heicIcon;
-    case 'bmp':
-      return icons.bmpIcon;
-    case 'doc':
-      return icons.docIcon;
-    case 'docx':
-      return icons.docxIcon;
-    case 'jpeg':
-      return icons.jpegIcon;
-    case 'jpg':
-      return icons.jpgIcon;
-    case 'pdf':
-      return icons.pdfIcon;
-    case 'png':
-      return icons.pngIcon;
-    default:
-      return icons.genericIcon;
-  }
-};
-
-const getCompleteIcon = (type: FileType | string): string => {
-  switch (type) {
-    case 'heic':
-      return icons.heicCompleteIcon;
-    case 'bmp':
-      return icons.bmpCompleteIcon;
-    case 'doc':
-      return icons.docCompleteIcon;
-    case 'docx':
-      return icons.docxCompleteIcon;
-    case 'jpeg':
-      return icons.jpegCompleteIcon;
-    case 'jpg':
-      return icons.jpgCompleteIcon;
-    case 'pdf':
-      return icons.pdfCompleteIcon;
-    case 'png':
-      return icons.pngCompleteIcon;
-    default:
-      return icons.genericCompleteIcon;
-  }
-};
+interface Props {
+  uploadStatus: UploadStatus;
+  file: UploadedFile;
+  onRemoveFile: (id: string) => void;
+  uploading: boolean;
+}
 
-export default ({
+const UploadFileCell: React.FC<Props> = ({
   uploadStatus,
   file,
   onRemoveFile,
   uploading,
-}: {
-  uploadStatus: UploadStatus;
-  file: UploadedFile;
-  onRemoveFile: (id: string) => void;
-  uploading: boolean;
 }) => {
-  const { id, error, type, name, progress, previewUrl } = file;
+  const {
+    id,
+    error,
+    name,
+    progress,
+    previewUrl,
+    showLoadingSpinner = false,
+    showProgressBar = true
+  } = file;
+
+  const isComplete = uploadStatus === 'COMPLETE';
+  const isUploading = uploadStatus === 'UPLOADING';
+  const hasError = uploadStatus === 'ERROR';
 
   const mapFileIcon: { [k in UploadStatus]: string } = {
-    UPLOADING: getUploadingIcon(type),
-    COMPLETE: getCompleteIcon(type),
-    ERROR: icons.errorIcon,
+    UPLOADING: icons.fileUploadIcon,
+    COMPLETE: icons.fileIcon,
+    ERROR: icons.fileErrorIcon,
   };
 
   const mapDisplayText: { [s in UploadStatus]: string } = {
@@ -79,7 +47,7 @@ export default ({
   return (
     <div
       className={classnames(`mt8 ${styles['upload-file-cell']}`, {
-        [styles['upload-file-cell-error']]: uploadStatus === 'ERROR',
+        [styles['upload-file-cell-error']]: hasError,
       })}
     >
       <div className={`w100 ${styles['cell-left-section']}`}>
@@ -89,13 +57,15 @@ export default ({
           alt=""
         />
         <div className="w100">
-          <div className={`p-p wmx5 ${styles['upload-display-text']}`}>
+          <div className={`p-p ${styles['upload-display-text']}`}>
             {mapDisplayText[uploadStatus]}
           </div>
-          {uploadStatus === 'UPLOADING' && (
+
+          {isUploading && showProgressBar && (
             <div className={`mt8 w100 ${styles['progress-bar-container']}`}>
               <div className={`${styles['progress-bar']}`} />
               <div
+                data-testid="ds-filecell-progressbar"
                 className={`${styles['progress-bar-filler']}`}
                 style={{ width: `${progress}%` }}
               />
@@ -105,14 +75,21 @@ export default ({
       </div>
       <div
         className={classnames(styles['cell-right-section'], {
-          [styles['cell-right-section-complete']]: uploadStatus === 'COMPLETE',
+          [styles['cell-right-section-complete']]: isComplete,
         })}
       >
-        {uploadStatus === 'UPLOADING' ? (
-          <div className={`p-spinner p-spinner__m ${styles.spinner}`} />
+        {isUploading ? (
+          <div className={styles.spinner}>
+            {showLoadingSpinner && (
+              <div
+                className='ds-spinner ds-spinner__m'
+                data-testid="ds-filecell-spinner"
+              />
+            )}
+          </div>
         ) : (
           <div>
-            {uploadStatus === 'COMPLETE' && (
+            {isComplete && (
               <a
                 className={styles['view-icon']}
                 href={previewUrl}
@@ -122,11 +99,12 @@ export default ({
                 <img src={icons.eyeIcon} alt="preview" />
               </a>
             )}
+
             <img
               className={classnames(styles['remove-icon'], {
                 [styles.disabled]: uploading,
               })}
-              src={icons.trashIcon}
+              src={hasError ? icons.trashErrorIcon : icons.trashIcon}
               onClick={() => onRemoveFile(id)}
               alt="remove"
             />
@@ -136,3 +114,5 @@ export default ({
     </div>
   );
 };
+
+export default UploadFileCell;

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: space-between;
 
+  height: 64px;
   padding: 8px 16px;
 
   border: 1px solid $ds-grey-400;
@@ -27,8 +28,8 @@
 }
 
 .main-icon {
-  width: 32px;
-  height: 40px;
+  width: 16px;
+  height: 20px;
   margin-right: 16px;
 }
 
@@ -81,13 +82,6 @@
   cursor: default;
 }
 
-.spinner {
-  color: $ds-primary-500;
-  animation: appear-down 0.6s;
-  animation-fill-mode: both;
-  animation-delay: 0.6s;
-}
-
 @keyframes appear-down {
   from {
     transform: translateY(-10px);

package/src/lib/components/multiDropzone/icons/eye.svg

@@ -1,4 +1,11 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14605_3108)">
+<path d="M0.832031 9.99998C0.832031 9.99998 4.16536 3.33331 9.9987 3.33331C15.832 3.33331 19.1654 9.99998 19.1654 9.99998C19.1654 9.99998 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99998 0.832031 9.99998Z" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99902 12.5C11.3797 12.5 12.499 11.3807 12.499 10C12.499 8.61929 11.3797 7.5 9.99902 7.5C8.61831 7.5 7.49902 8.61929 7.49902 10C7.49902 11.3807 8.61831 12.5 9.99902 12.5Z" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_14605_3108">
+<rect width="20" height="20" fill="white" transform="translate(-0.000976562)"/>
+</clipPath>
+</defs>
 </svg>

package/src/lib/components/multiDropzone/icons/file-error.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8272 21H2.72839C2.27 21 1.83037 20.8084 1.50624 20.4675C1.1821 20.1265 1 19.664 1 19.1818V6.45455L6.18518 1H14.8272C15.2856 1 15.7252 1.19156 16.0493 1.53253C16.3735 1.87351 16.5556 2.33597 16.5556 2.81818V19.1818C16.5556 19.664 16.3735 20.1265 16.0493 20.4675C15.7252 20.8084 15.2856 21 14.8272 21Z" stroke="#E55454" stroke-width="2" stroke-linejoin="round"/>
+<path d="M6.0646 1V4.77358C6.0646 5.27399 5.88674 5.75391 5.57014 6.10775C5.25354 6.46159 4.82414 6.66038 4.3764 6.66038H1" stroke="#E55454" stroke-width="2" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/multiDropzone/icons/file-upload.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8272 21H2.72839C2.27 21 1.83037 20.8084 1.50624 20.4675C1.1821 20.1265 1 19.664 1 19.1818V6.45455L6.18518 1H14.8272C15.2856 1 15.7252 1.19156 16.0493 1.53253C16.3735 1.87351 16.5556 2.33597 16.5556 2.81818V19.1818C16.5556 19.664 16.3735 20.1265 16.0493 20.4675C15.7252 20.8084 15.2856 21 14.8272 21Z" stroke="#8E8CEE" stroke-width="2" stroke-linejoin="round"/>
+<path d="M6.0646 1V4.77358C6.0646 5.27399 5.88674 5.75391 5.57014 6.10775C5.25354 6.46159 4.82414 6.66038 4.3764 6.66038H1" stroke="#8E8CEE" stroke-width="2" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/multiDropzone/icons/file.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8272 21H2.7284C2.27 21 1.83037 20.8084 1.50624 20.4675C1.1821 20.1265 1 19.664 1 19.1818V6.45455L6.18519 1H14.8272C15.2856 1 15.7252 1.19156 16.0493 1.53253C16.3735 1.87351 16.5556 2.33597 16.5556 2.81818V19.1818C16.5556 19.664 16.3735 20.1265 16.0493 20.4675C15.7252 20.8084 15.2856 21 14.8272 21Z" stroke="#696970" stroke-width="2" stroke-linejoin="round"/>
+<path d="M6.0646 1V4.77358C6.0646 5.27399 5.88674 5.75391 5.57014 6.10775C5.25354 6.46159 4.82414 6.66038 4.3764 6.66038H1" stroke="#696970" stroke-width="2" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/multiDropzone/icons/index.ts

@@ -1,51 +1,19 @@
-import uploadSvg from './upload.svg';
-
-import genericSvg from './generic.svg';
-import bmpSvg from './bmp.svg';
-import docSvg from './doc.svg';
-import docxSvg from './docx.svg';
-import heicSvg from './heic.svg';
-import jpegSvg from './jpeg.svg';
-import jpgSvg from './jpg.svg';
-import pdfSvg from './pdf.svg';
-import pngSvg from './png.svg';
-
-import genericCompleteSvg from './generic-complete.svg';
-import bmpCompleteSvg from './bmp-complete.svg';
-import docCompleteSvg from './doc-complete.svg';
-import docxCompleteSvg from './docx-complete.svg';
-import heicCompleteSvg from './heic-complete.svg';
-import jpegCompleteSvg from './jpeg-complete.svg';
-import jpgCompleteSvg from './jpg-complete.svg';
-import pdfCompleteSvg from './pdf-complete.svg';
-import pngCompleteSvg from './png-complete.svg';
-
-import errorSvg from './generic-error.svg';
-
 import eyeSvg from './eye.svg';
+import fileSvg from './file.svg';
+import fileErrorSvg from './file-error.svg';
+import fileUploadSvg from './file-upload.svg';
 import trashSvg from './trash.svg';
+import trashErrorSvg from './trash-error.svg';
+import uploadSvg from './upload.svg';
+import uploadSmallSvg from './upload-small.svg';
 
 export default {
-  uploadIcon: uploadSvg,
-  genericIcon: genericSvg,
-  bmpIcon: bmpSvg,
-  docIcon: docSvg,
-  docxIcon: docxSvg,
-  heicIcon: heicSvg,
-  jpegIcon: jpegSvg,
-  jpgIcon: jpgSvg,
-  pdfIcon: pdfSvg,
-  pngIcon: pngSvg,
-  genericCompleteIcon: genericCompleteSvg,
-  bmpCompleteIcon: bmpCompleteSvg,
-  docCompleteIcon: docCompleteSvg,
-  docxCompleteIcon: docxCompleteSvg,
-  heicCompleteIcon: heicCompleteSvg,
-  jpegCompleteIcon: jpegCompleteSvg,
-  jpgCompleteIcon: jpgCompleteSvg,
-  pdfCompleteIcon: pdfCompleteSvg,
-  pngCompleteIcon: pngCompleteSvg,
-  errorIcon: errorSvg,
   eyeIcon: eyeSvg,
+  fileErrorIcon: fileErrorSvg,
+  fileIcon: fileSvg,
+  fileUploadIcon: fileUploadSvg,
   trashIcon: trashSvg,
+  trashErrorIcon: trashErrorSvg,
+  uploadIcon: uploadSvg,
+  uploadSmallIcon: uploadSmallSvg,
 };

package/src/lib/components/multiDropzone/icons/trash-error.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 5H4.16667H17.5" stroke="#E55454" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66699 5.00002V3.33335C6.66699 2.89133 6.84259 2.4674 7.15515 2.15484C7.46771 1.84228 7.89163 1.66669 8.33366 1.66669H11.667C12.109 1.66669 12.5329 1.84228 12.8455 2.15484C13.1581 2.4674 13.3337 2.89133 13.3337 3.33335V5.00002M15.8337 5.00002V16.6667C15.8337 17.1087 15.6581 17.5326 15.3455 17.8452C15.0329 18.1578 14.609 18.3334 14.167 18.3334H5.83366C5.39163 18.3334 4.96771 18.1578 4.65515 17.8452C4.34259 17.5326 4.16699 17.1087 4.16699 16.6667V5.00002H15.8337Z" stroke="#E55454" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33301 9.16669V14.1667" stroke="#E55454" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.667 9.16669V14.1667" stroke="#E55454" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/multiDropzone/icons/trash.svg

@@ -1,6 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6H5H21" stroke="#E55454" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="#E55454" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M10 11V17" stroke="#E55454" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M14 11V17" stroke="#E55454" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 5H4.16667H17.5" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66699 5.00002V3.33335C6.66699 2.89133 6.84259 2.4674 7.15515 2.15484C7.46771 1.84228 7.89163 1.66669 8.33366 1.66669H11.667C12.109 1.66669 12.5329 1.84228 12.8455 2.15484C13.1581 2.4674 13.3337 2.89133 13.3337 3.33335V5.00002M15.8337 5.00002V16.6667C15.8337 17.1087 15.6581 17.5326 15.3455 17.8452C15.0329 18.1578 14.609 18.3334 14.167 18.3334H5.83366C5.39163 18.3334 4.96771 18.1578 4.65515 17.8452C4.34259 17.5326 4.16699 17.1087 4.16699 16.6667V5.00002H15.8337Z" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33301 9.16669V14.1667" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.667 9.16669V14.1667" stroke="#D2D2D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/lib/components/multiDropzone/icons/upload-small.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14605_3119)">
+<path d="M7.31072 14.9498H4.75296C3.50626 14.9498 0.833008 13.811 0.833008 10.8673C0.833008 7.69987 3.50626 6.63794 4.84594 6.63794C5.02868 5.11158 6.03646 2.27952 9.74924 2.08331C13.3208 2.08331 14.9149 5.30618 14.6525 7.70738C16.0496 7.6209 19.1663 8.25113 19.1663 11.3875C19.1663 14.0551 16.3723 15.0691 14.9752 14.9498H12.7745" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 18.0851V9.32739" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.8125 11.5155L10.0007 9.32739L12.1888 11.5155" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_14605_3119">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>