@aquera/nile-elements 0.1.37 → 0.1.38-beta-1.0

package/dist/src/nile-file-preview/types/nile-file-preview.enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.enums.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.enums.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,2CAAuB,CAAA;IACvB,uCAAmB,CAAA;IACnB,6CAAyB,CAAA;IACzB,mCAAe,CAAA;AACjB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,+CAAyB,CAAA;IACzB,2CAAqB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,wBAQX;AARD,WAAY,wBAAwB;IAClC,qFAAyD,CAAA;IACzD,8DAAkC,CAAA;IAClC,2EAA+C,CAAA;IAC/C,8DAAkC,CAAA;IAClC,oEAAwC,CAAA;IACxC,kEAAsC,CAAA;IACtC,kFAAsD,CAAA;AACxD,CAAC,EARW,wBAAwB,KAAxB,wBAAwB,QAQnC;AAED,MAAM,CAAN,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,2CAAuB,CAAA;IACvB,iDAA6B,CAAA;IAC7B,oDAAgC,CAAA;IAChC,+CAA2B,CAAA;IAC3B,6DAAyC,CAAA;IACzC,iDAA6B,CAAA;AAC/B,CAAC,EAPW,gBAAgB,KAAhB,gBAAgB,QAO3B","sourcesContent":["export enum FilePreviewState {\n  DEFAULT = 'default',\n  UPLOADING = 'uploading',\n  PREVIEW = 'preview',\n  NO_PREVIEW = 'no-preview',\n  ERROR = 'error'\n}\n\nexport enum FilePreviewVariant {\n  HORIZONTAL = 'horizontal',\n  VERTICAL = 'vertical'\n}\n\nexport enum FilePreviewErrorMessages {\n  INVALID_FORMAT = \"Invalid File Format. Please try again.\",\n  SIZE_LIMIT = \"Size limit exceeded\",\n  FAILED_TO_LOAD = \"Failed to load file from URL\",\n  UNKNOWN_FILE_NAME = 'unknown-file',\n  UPLOAD_CANCEL = \"File upload cancelled.\",\n  NO_FILE_SELECTED = \"No file selected.\",\n  UNABLE_TO_GENEARTE_URL = \"Unable to generate the url.\"\n}\n\nexport enum FilePreviewEvent {\n  NILE_INIT = \"nile-init\",\n  NILE_RECEIVE = \"nile-receive\",\n  NILE_UPLOADING = \"nile-uploding\",\n  NILE_REMOVE = \"nile-remove\",\n  NILE_CANCEL_UPLOAD = \"nile-cancel-upload\",\n  NILE_DESTROY = \"nile-destroy\"\n}"]}

package/dist/src/nile-file-preview/types/nile-file-preview.interface.d.ts

@@ -0,0 +1,4 @@
+export type RemoveFileDetail = {
+    value: File;
+    url: string;
+};

package/dist/src/nile-file-preview/types/nile-file-preview.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nile-file-preview.interface.js.map

package/dist/src/nile-file-preview/types/nile-file-preview.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.interface.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/types/nile-file-preview.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type RemoveFileDetail = {\n  value: File;\n  url: string;\n};\n"]}

package/dist/src/nile-file-preview/utils/file-preview.util.d.ts

@@ -0,0 +1,3 @@
+import { RemoveFileDetail } from "../types";
+export declare const generatePreviewUrl: (file: File) => Promise<string>;
+export declare const removeFile: (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string) => void;

package/dist/src/nile-file-preview/utils/file-preview.util.js

@@ -0,0 +1,29 @@
+import { FilePreviewEvent } from "../types";
+export const generatePreviewUrl = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+        else {
+            reject('No file selected');
+        }
+        reader.onload = () => {
+            const previewUrl = reader.result;
+            resolve(previewUrl);
+        };
+        reader.onerror = (error) => {
+            reject("Unable to generate the url");
+        };
+    });
+};
+export const removeFile = (removeFile, e, originalUrl) => {
+    if (e.target) {
+        e.target.dispatchEvent(new CustomEvent(FilePreviewEvent.NILE_REMOVE, {
+            detail: { value: removeFile, url: originalUrl },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+//# sourceMappingURL=file-preview.util.js.map

package/dist/src/nile-file-preview/utils/file-preview.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-preview.util.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/file-preview.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAmB,EAAE;IAChE,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAEhC,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAC7B,CAAC;QAED,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAgB,CAAC;YAC3C,OAAO,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,MAAM,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YACzB,MAAM,CAAC,4BAA4B,CAAC,CAAC;QACvC,CAAC,CAAA;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,UAAgB,EAAE,CAAgC,EAAE,WAAmB,EAAQ,EAAE;IAC1G,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACb,CAAC,CAAC,MAAM,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,gBAAgB,CAAC,WAAW,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE;YAC/C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { RemoveFileDetail, FilePreviewEvent } from \"../types\";\n\nexport const generatePreviewUrl = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    if (file) {\n      reader.readAsDataURL(file);\n    } else {\n      reject('No file selected');\n    }\n\n    reader.onload = () => {\n      const previewUrl = reader.result as string;\n      resolve(previewUrl);\n    };\n\n    reader.onerror = (error) => {\n      reject(\"Unable to generate the url\");\n    }\n  });\n}\n\nexport const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string): void => {\n  if (e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_REMOVE, {\n        detail: { value: removeFile, url: originalUrl },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n};"]}

package/dist/src/nile-file-preview/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './nile-file-preview.util';

package/dist/src/nile-file-preview/utils/index.js

@@ -0,0 +1,2 @@
+export * from './nile-file-preview.util';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-file-preview/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA","sourcesContent":["export * from './nile-file-preview.util'"]}

package/dist/src/nile-file-preview/utils/nile-file-preview.util.d.ts

@@ -0,0 +1,4 @@
+import { RemoveFileDetail } from "../types";
+export declare const generatePreviewUrl: (file: File) => Promise<string>;
+export declare const removeFile: (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string) => void;
+export declare const cancelFileUpload: (file: File, e: CustomEvent<RemoveFileDetail>) => void;

package/dist/src/nile-file-preview/utils/nile-file-preview.util.js

@@ -0,0 +1,38 @@
+import { FilePreviewEvent, FilePreviewErrorMessages } from "../types";
+export const generatePreviewUrl = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+        else {
+            reject(FilePreviewErrorMessages.NO_FILE_SELECTED);
+        }
+        reader.onload = () => {
+            const previewUrl = reader.result;
+            resolve(previewUrl);
+        };
+        reader.onerror = (error) => {
+            reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);
+        };
+    });
+};
+export const removeFile = (removeFile, e, originalUrl) => {
+    if (e.target) {
+        e.target.dispatchEvent(new CustomEvent(FilePreviewEvent.NILE_REMOVE, {
+            detail: { value: removeFile, url: originalUrl },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+export const cancelFileUpload = (file, e) => {
+    if (e.target) {
+        e.target.dispatchEvent(new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {
+            detail: { file: file },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+//# sourceMappingURL=nile-file-preview.util.js.map

package/dist/src/nile-file-preview/utils/nile-file-preview.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-file-preview.util.js","sourceRoot":"","sources":["../../../../src/nile-file-preview/utils/nile-file-preview.util.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAExF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAmB,EAAE;IAChE,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAEhC,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;QAED,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAgB,CAAC;YAC3C,OAAO,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC,CAAC;QAEF,MAAM,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YACzB,MAAM,CAAC,wBAAwB,CAAC,sBAAsB,CAAC,CAAC;QAC1D,CAAC,CAAA;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,UAAgB,EAAE,CAAgC,EAAE,WAAmB,EAAQ,EAAE;IAC1G,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACb,CAAC,CAAC,MAAM,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,gBAAgB,CAAC,WAAW,EAAE;YAC5C,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE;YAC/C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,CAAgC,EAAE,EAAE;IAC/E,IAAG,CAAC,CAAC,MAAM,EAAE,CAAC;QACZ,CAAC,CAAC,MAAM,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;YACnD,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACtB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;AACH,CAAC,CAAA","sourcesContent":["import NileFilePreview from \"../nile-file-preview\";\nimport { RemoveFileDetail, FilePreviewEvent, FilePreviewErrorMessages } from \"../types\";\n\nexport const generatePreviewUrl = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n\n    if (file) {\n      reader.readAsDataURL(file);\n    } else {\n      reject(FilePreviewErrorMessages.NO_FILE_SELECTED);\n    }\n\n    reader.onload = () => {\n      const previewUrl = reader.result as string;\n      resolve(previewUrl);\n    };\n\n    reader.onerror = (error) => {\n      reject(FilePreviewErrorMessages.UNABLE_TO_GENEARTE_URL);\n    }\n  });\n}\n\nexport const removeFile = (removeFile: File, e: CustomEvent<RemoveFileDetail>, originalUrl: string): void => {\n  if (e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_REMOVE, {\n        detail: { value: removeFile, url: originalUrl },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n};\n\nexport const cancelFileUpload = (file: File, e: CustomEvent<RemoveFileDetail>) => {\n  if(e.target) {\n    e.target.dispatchEvent(\n      new CustomEvent(FilePreviewEvent.NILE_CANCEL_UPLOAD, {\n        detail: { file: file },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}"]}

package/dist/src/nile-file-upload/index.d.ts

@@ -0,0 +1 @@
+export { NileFileUpload } from './nile-file-upload';

package/dist/src/nile-file-upload/index.js

@@ -0,0 +1,2 @@
+export { NileFileUpload } from './nile-file-upload';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-file-upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-file-upload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileFileUpload } from './nile-file-upload';\n"]}

package/dist/src/nile-file-upload/nile-file-upload.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * FileUpload CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-file-upload/nile-file-upload.css.js

@@ -0,0 +1,548 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * FileUpload CSS
+ */
+export const styles = css `
+  :host {
+    display: inline-block;
+  }
+
+  * {
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 18px;
+    height: auto;
+  }
+
+  input {
+    display: none;
+  }
+
+  .horizontal-div {
+    margin-bottom: 10px;
+    height: 62px;
+    max-width: 648px;
+    width: max(648px, 100%);
+    min-width: 230px;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base);
+  }
+
+  .hover-border {
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .vertical-div {
+    min-height: 156px;
+    height: auto;
+    min-width: 240px;
+    width: 240px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border-radius: var(--nile-radius-radius-xs);
+    color: var(--nile-colors-dark-900);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
+    position: relative; 
+  }
+
+  .vertical-div:hover {
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  .outer-div-border {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .inner-div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 18px;
+    box-sizing: border-box;
+  }
+
+  .content {
+    display: flex;  
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .content h4 {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+  }
+      
+  .content p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  /*  DISABLED STATE */
+  .disable {
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* DRAGGING */
+  .dragging {
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 18px;
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .icons-container {
+    display: flex;
+    gap: 4px;
+  }
+
+  .general-icon {
+    transform: rotate(-18.11deg);
+    position: relative;
+    bottom: 3px;
+  }
+
+  .image-icon {
+    transform: rotate(15deg);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+  }
+
+  /* Uploading State */
+  .uploading {
+    width: 648px;
+    min-width: 230px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    box-sizing: border-box;
+    border: 1px solid var(--nile-colors-neutral-400)
+  }
+  
+  .uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .progress-bar-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+  }
+
+  .progress-bar-percent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .progress-bar-container p {
+    margin: 0px;
+  }
+
+  .progress-bar-container > p {
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
+  }
+
+  /* PREVIEW STATE */
+  .preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .preview-inner {
+    display: flex;
+    gap: 18px;
+  }
+
+  .preview-image-container {
+    height: 42px;
+    width: 42px;
+  }
+
+  .preview-image-container img {
+    height: 42px;
+    width: 42px;
+    object-fit: contain;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview nile-icon:hover {
+    cursor: pointer;
+  }
+
+
+  /* NO PREVIEW STATE */
+  .no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .no-preview-container {
+    display: flex;
+    gap: 18px;
+  }
+
+  .document-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  .document-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .preview-file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .preview-file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .preview-file-info p:last-of-type{
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .no-preview > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* ERROR STATE */
+  
+  .error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-container {
+    width: 100%;
+    display: flex;
+    gap: 18px;
+  }
+
+  .error-icon {
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100);
+  }
+
+  .error-icon nile-icon {
+    height: 40px;
+    width: 40px;
+  }
+  
+  .file-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .file-info p {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .file-info p:last-of-type{
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .error > nile-icon:hover {
+    cursor: pointer;
+  }
+
+  /* VARTICAL STATE START */
+  /* Default State */
+
+  .vertical-default {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px
+  }
+
+  .content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .content-container h4 {
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .content-container p:first-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+  }
+
+  .content-container p:last-child {
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  /* Drag State */
+  .vertical-drag {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap:18px;
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-blue-700);
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-blue-500);
+  }
+
+  /* Uploading State */
+  .vertical-uploading {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-uploading:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .corner-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  /* Preview State */
+  .vertical-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .image-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+    object-fit: cover;
+    width: 80px;
+    height: 80px;
+    border-radius: var(--nile-radius-radius-xs);
+  }
+
+  /* Vertical No Preview State */
+  .vertical-no-preview {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-no-preview:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .vertical-document-icon {
+    height: 80px;
+    width: 80px;
+    padding: 2px 3px 2px 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
+  }
+
+  /* Veritcal Error State */
+  .vertical-error {
+    border: 1px solid var(--nile-colors-neutral-400);
+  }
+
+  .vertical-error:hover {
+    border-color: var(--nile-colors-neutral-400);
+  }
+
+  .error-bg {
+    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400);
+  }
+
+  .error-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    text-align: start;
+  }
+
+  .error-p {
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    width: 216px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+
+  .error-p p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+
+  /* Displaing uploaded files CSS */
+  .display-files {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    width: 648px;
+    min-width: 230px;
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-neutral-700);
+    border-radius: var(--nile-radius-radius-xs);
+    scrollbar-width: none;
+    padding: 12px;
+  }
+
+  ul, li {
+    width: 100%;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  /* for the upload error messages */
+  .upload-error {
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-500);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--nile-spacing-one-half-x);
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-file-upload.css.js.map