@aquera/nile-elements 0.1.46-beta-2.1 → 0.1.46-beta-2.2

package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-file-preview.css.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  * {\n    padding: 0px;\n    margin: 0px;\n    box-sizing: border-box;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 18px;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    max-height: 62px;\n    width: 648px;\n    min-width: 230px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    background-color: var(--nile-colors-white-base);\n  }\n  \n  .hover-state {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .vertical-div {\n    height: auto;\n    min-height: 156px;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    padding: 12px;\n    border-radius: var(--nile-radius-radius-xs);\n    color: var(--nile-colors-dark-900);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    position: relative; \n    margin-bottom: 10px;\n  }\n\n  .vertical-div:hover {\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  .outer-div-border {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .icons-container {\n    display: flex;\n    gap: 4px;\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    height: 62px;\n    width: 648px;\n    padding: 12px;\n    min-width: 230px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    box-sizing: border-box;\n    border: 1px solid var(--nile-colors-neutral-400);\n    border-radius: 4px;\n    background-color: var(--nile-colors-white-base);\n  }\n  \n  .uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .progress-bar-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .progress-bar-percent {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .progress-bar-container p {\n    margin: 0px;\n  }\n\n  .progress-bar-container > p {\n    font-size: var(--nile-type-scale-1);\n    color: var(--nile-colors-dark-500);\n  }\n\n  /* PREVIEW STATE */\n  .preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .preview-inner {\n    display: flex;\n    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img, iframe {\n    height: 42px;\n    width: 42px;\n    object-fit: contain;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .document-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  .error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-container {\n    width: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--nile-radius-radius-xs);\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--nile-colors-red-400);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .error-icon nile-icon {\n    height: 40px;\n    width: 40px;\n  }\n  \n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .file-info p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    /* padding-bottom: 6px; */\n    text-align: center;\n  }\n  \n  .file-info > nile-tooltip > p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    text-align: center;\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n  .vertical-default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 18px\n  }\n\n  .content-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .content-container h4 {\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .content-container p:first-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .content-container p:last-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  /* Drag State */\n  .vertical-drag {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap:18px;\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-blue-700);\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  /* Uploading State */\n  .vertical-uploading {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-uploading:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 40px;\n  }\n\n  .corner-icon {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  /* Preview State */\n  .vertical-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .image-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n    object-fit: cover;\n    width: 80px;\n    height: 80px;\n    border-radius: var(--nile-radius-radius-xs);\n  }\n\n  /* Vertical No Preview State */\n  .vertical-no-preview {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-no-preview:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .vertical-document-icon {\n    height: 80px;\n    width: 80px;\n    padding: 2px 3px 2px 3px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--nile-radius-radius-xs);\n    border: 1px solid var(--nile-colors-blue-400);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  /* Veritcal Error State */\n  .vertical-error {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .vertical-error:hover {\n    border-color: var(--nile-colors-neutral-400);\n  }\n\n  .error-bg {\n    background-color: var(--nile-colors-red-100);\n    border: 1px solid var(--nile-colors-red-400);\n  }\n\n  .file-info-vertical-state {\n    width: 100%;\n    text-align: start;\n  }\n\n  .file-info-vertical-state p {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    padding-bottom: 6px;\n    text-align: center;\n  }\n  \n  .file-info-vertical-state > nile-tooltip > p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    text-align: center;\n  }\n\n  .error-message {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin: 0px;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-regular);\n    text-align: center\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--nile-colors-neutral-700);\n    border-radius: var(--nile-radius-radius-xs);\n    scrollbar-width: none;\n    padding: 12px;\n  }\n\n  ul, li {\n    width: 100%;\n  }\n\n  li {\n    list-style-type: none;\n  }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-file-preview.css.cjs.js","sources":["../../../src/nile-file-preview/nile-file-preview.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FileUpload CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  * {\n    padding: var(--nile-spacing-none, var(--ng-spacing-none));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 18px;\n    height: auto;\n  }\n\n  input {\n    display: none;\n  }\n\n  .horizontal-div {\n    height: var(--nile-height-60px, var(--ng-height-60px));\n    max-width: 648px;\n    width: max(648px, 100%);\n    min-width: 230px;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n  \n  .hover-state {\n    border-color: var(--nile-colors-primary-600);\n  }\n\n  .vertical-div {\n    height: auto;\n    min-height: 156px;\n    min-width: 240px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    padding: 12px;\n    border-radius: var(--nile-radius-radius-xs);\n    color: var(--nile-colors-dark-900);\n    border: 1px dashed var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    position: relative; \n    margin-bottom: 10px;\n  }\n\n  .vertical-div:hover {\n    border-color: var(--nile-colors-blue-500);\n  }\n\n  .outer-div-border {\n    border: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  .inner-div {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    box-sizing: border-box;\n  }\n\n  .icons-container {\n    display: flex;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .general-icon {\n    transform: rotate(-18.11deg);\n    position: relative;\n    bottom: 3px;\n  }\n\n  .image-icon {\n    transform: rotate(15deg);\n  }\n\n  .icon:hover {\n    cursor: pointer;\n  }\n\n  /* Uploading State */\n  .uploading {\n    height: 62px;\n    width: 648px;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    min-width: 230px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 18px;\n    box-sizing: border-box;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1)) \n      var(--nile-border-style-solid, var(--ng-border-style-solid)) \n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n  }\n  \n  .uploading:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .progress-bar-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n  }\n\n  .progress-bar-percent {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n  }\n\n  nile-progress-bar li span {\n    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  .progress-bar-container p {\n    margin: 0px;\n  }\n\n  .progress-bar-container > p {\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .preview {\n    height: 62px;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .preview:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .preview-inner {\n    display: flex;\n    gap: 18px;\n  }\n\n  .preview-image-container {\n    height: var(--nile-height-42px, var(--ng-height-42px));\n    width: var(--nile-width-42px, 42px);\n  }\n\n  .preview-image-container img, iframe {\n    height: var(--nile-height-42px, var(--ng-height-42px));\n    width: var(--nile-width-42px, 42px); // check it once\n    object-fit: contain;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .preview-file-info p {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n  }\n\n  .preview nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* NO PREVIEW STATE */\n  .no-preview {\n    height: 62px;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .no-preview:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .no-preview-container {\n    display: flex;\n    gap: 18px;\n  }\n\n  .document-icon {\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    width: var(--nile-width-40px, var(--ng-width-10));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n  }\n\n  .document-icon nile-icon {\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    width: var(--nile-width-40px, var(--ng-width-10));\n  }\n  \n  .preview-file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .preview-file-info p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n  }\n\n  .preview-file-info p:last-of-type{\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n  }\n\n  .no-preview > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* ERROR STATE */\n  .error {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n  }\n\n  .error:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n  }\n\n  .error-container {\n    width: 100%;\n    display: flex;\n    gap: 18px;\n  }\n\n  .error-icon {\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    width: var(--nile-width-40px, var(--ng-width-10));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-red-400, var(--ng-colors-border-error));\n    background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));\n  }\n\n  .error-icon nile-icon {\n    height: var(--nile-height-40px, var(--ng-height-40px));\n    width: var(--nile-width-40px, var(--ng-width-10));\n  }\n  \n  .file-info {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .file-info p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    text-align: center;\n  }\n  \n  .file-info > nile-tooltip > p {\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    text-align: center;\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n  .vertical-default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 18px\n  }\n\n  .content-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .content-container h4 {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n  }\n\n  .content-container p:first-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n  }\n\n  .content-container p:last-child {\n    margin: 0px;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /* Drag State */\n  .vertical-drag {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap:18px;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));\n  }\n\n  /* Uploading State */\n  .vertical-uploading {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    /* border: 1px solid var(--nile-colors-neutral-400); */\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .vertical-uploading:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .loading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));\n  }\n\n  .corner-icon {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  /* Preview State */\n  .vertical-preview {\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .vertical-preview:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .image-preview {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    object-fit: cover;\n    width: var(--nile-width-80px, var(--ng-spacing-8xl));\n    height: var(--nile-height-80px, var(--ng-height-80px));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n  }\n\n  /* Vertical No Preview State */\n  .vertical-no-preview {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .vertical-no-preview:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n  }\n\n  .vertical-document-icon {\n    height: var(--nile-height-80px, var(--ng-height-80px));\n    width: var(--nile-width-80px, var(--ng-spacing-8xl));\n    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--nile-radius-radius-xs);\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));\n  }\n\n  /* Veritcal Error State */\n  .vertical-error {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n  }\n\n  .vertical-error:hover {\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));\n  }\n\n  .error-bg {\n    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-red-400, var(--ng-colors-border-error));\n  }\n\n  .file-info-vertical-state {\n    width: 100%;\n    text-align: start;\n  }\n\n  .file-info-vertical-state p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    padding-bottom: 6px;\n    text-align: center;\n  }\n  \n  .file-info-vertical-state > nile-tooltip > p {\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    text-align: center;\n  }\n\n  .error-message {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    text-align: center\n  }\n\n  .error-p {\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    width: 216px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n  }\n\n  .error-p p {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n\n  /* Displaing uploaded files CSS */\n  .display-files {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 8px;\n    width: 648px;\n    min-width: 230px;\n    max-height: 200px;\n    overflow-y: auto;\n    border: \n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-solid, var(--ng-border-style-solid))  \n      var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    scrollbar-width: none;\n    padding: var(--nile-radius-lg, var(--ng-spacing-lg));\n  }\n\n  ul, li {\n    width: 100%;\n  }\n\n  li {\n    list-style-type: none;\n  }\n`;\n\nexport default [styles];"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-file-preview/nile-file-preview.css.esm.js

@@ -1,12 +1,16 @@
-import{css as e}from"lit";const r=e`
+import{css as r}from"lit";const e=r`
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: 0px;
-    margin: 0px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
     box-sizing: border-box;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
@@ -23,18 +27,19 @@ import{css as e}from"lit";const r=e`
   }
 
   .horizontal-div {
-    max-height: 62px;
-    width: 648px;
+    height: var(--nile-height-60px, var(--ng-height-60px));
+    max-width: 648px;
+    width: max(648px, 100%);
     min-width: 230px;
-    padding: 12px;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     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);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   
   .hover-state {
@@ -78,7 +83,7 @@ import{css as e}from"lit";const r=e`
 
   .icons-container {
     display: flex;
-    gap: 4px;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .general-icon {
@@ -99,35 +104,41 @@ import{css as e}from"lit";const r=e`
   .uploading {
     height: 62px;
     width: 648px;
-    padding: 12px;
+    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
     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);
-    border-radius: 4px;
-    background-color: var(--nile-colors-white-base);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1)) 
+      var(--nile-border-style-solid, var(--ng-border-style-solid)) 
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
   }
   
   .uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
   .progress-bar-container {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    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);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+  }
+
+  nile-progress-bar li span {
+    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
   }
 
   .progress-bar-container p {
@@ -135,17 +146,21 @@ import{css as e}from"lit";const r=e`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
   }
 
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    height: 62px;
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview-inner {
@@ -154,16 +169,19 @@ import{css as e}from"lit";const r=e`
   }
 
   .preview-image-container {
-    height: 42px;
-    width: 42px;
+    height: var(--nile-height-42px, var(--ng-height-42px));
+    width: var(--nile-width-42px, 42px);
   }
 
   .preview-image-container img, iframe {
-    height: 42px;
-    width: 42px;
+    height: var(--nile-height-42px, var(--ng-height-42px));
+    width: var(--nile-width-42px, 42px); // check it once
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   
   .preview-file-info {
@@ -172,19 +190,20 @@ import{css as e}from"lit";const r=e`
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
   }
 
   .preview-file-info p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
   }
 
   .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);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
   }
 
   .preview nile-icon:hover {
@@ -193,11 +212,15 @@ import{css as e}from"lit";const r=e`
 
   /* NO PREVIEW STATE */
   .no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    height: 62px;
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview-container {
@@ -206,20 +229,23 @@ import{css as e}from"lit";const r=e`
   }
 
   .document-icon {
-    height: 40px;
-    width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
-    padding: 2px 3px 2px 3px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-blue-400);
-    background-color: var(--nile-colors-blue-100);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
   }
 
   .document-icon nile-icon {
-    height: 40px;
-    width: 40px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
   }
   
   .preview-file-info {
@@ -232,15 +258,15 @@ import{css as e}from"lit";const r=e`
   }
 
   .preview-file-info p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
   }
 
   .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);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
   }
 
   .no-preview > nile-icon:hover {
@@ -249,11 +275,11 @@ import{css as e}from"lit";const r=e`
 
   /* ERROR STATE */
   .error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
   }
 
   .error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
   }
 
   .error-container {
@@ -263,20 +289,23 @@ import{css as e}from"lit";const r=e`
   }
 
   .error-icon {
-    height: 40px;
-    width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
-    padding: 2px 3px 2px 3px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-red-400);
-    background-color: var(--nile-colors-red-100);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-red-400, var(--ng-colors-border-error));
+    background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));
   }
 
   .error-icon nile-icon {
-    height: 40px;
-    width: 40px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
+    width: var(--nile-width-40px, var(--ng-width-10));
   }
   
   .file-info {
@@ -290,17 +319,16 @@ import{css as e}from"lit";const r=e`
   }
 
   .file-info p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    /* padding-bottom: 6px; */
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     text-align: center;
   }
   
   .file-info > nile-tooltip > p {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     text-align: center;
   }
 
@@ -328,20 +356,20 @@ import{css as e}from"lit";const r=e`
   }
 
   .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
   }
 
   .content-container p:first-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
   }
 
   .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);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
   }
 
   /* Drag State */
@@ -351,10 +379,10 @@ import{css as e}from"lit";const r=e`
     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);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));
   }
 
   /* Uploading State */
@@ -363,18 +391,22 @@ import{css as e}from"lit";const r=e`
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    /* border: 1px solid var(--nile-colors-neutral-400); */
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .loading {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: 40px;
+    padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .corner-icon {
@@ -385,54 +417,63 @@ import{css as e}from"lit";const r=e`
 
   /* Preview State */
   .vertical-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .image-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     object-fit: cover;
-    width: 80px;
-    height: 80px;
-    border-radius: var(--nile-radius-radius-xs);
+    width: var(--nile-width-80px, var(--ng-spacing-8xl));
+    height: var(--nile-height-80px, var(--ng-height-80px));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
   }
 
   /* Vertical No Preview State */
   .vertical-no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-document-icon {
-    height: 80px;
-    width: 80px;
-    padding: 2px 3px 2px 3px;
+    height: var(--nile-height-80px, var(--ng-height-80px));
+    width: var(--nile-width-80px, var(--ng-spacing-8xl));
+    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
     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);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));
   }
 
   /* Veritcal Error State */
   .vertical-error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
   }
 
   .vertical-error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
   }
 
   .error-bg {
-    background-color: var(--nile-colors-red-100);
-    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-red-400, var(--ng-colors-border-error));
   }
 
   .file-info-vertical-state {
@@ -441,17 +482,17 @@ import{css as e}from"lit";const r=e`
   }
 
   .file-info-vertical-state p {
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     padding-bottom: 6px;
     text-align: center;
   }
   
   .file-info-vertical-state > nile-tooltip > p {
     color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     text-align: center;
   }
 
@@ -461,15 +502,15 @@ import{css as e}from"lit";const r=e`
     justify-content: center;
     align-items: center;
     gap: 8px;
-    margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
     text-align: center
   }
 
   .error-p {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     width: 216px;
     white-space: nowrap;
     overflow: hidden;
@@ -481,7 +522,7 @@ import{css as e}from"lit";const r=e`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin: 0;
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
 
@@ -496,10 +537,13 @@ import{css as e}from"lit";const r=e`
     min-width: 230px;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border: 
+      var(--nile-border-width-1, var(--ng-border-width-1))
+      var(--nile-border-style-solid, var(--ng-border-style-solid))  
+      var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     scrollbar-width: none;
-    padding: 12px;
+    padding: var(--nile-radius-lg, var(--ng-spacing-lg));
   }
 
   ul, li {
@@ -509,4 +553,4 @@ import{css as e}from"lit";const r=e`
   li {
     list-style-type: none;
   }
-`;export{r as s};
+`;export{e as s};

package/dist/nile-file-preview/nile-file-preview.esm.js

@@ -1,3 +1,3 @@
-import{__decorate as t}from"tslib";import{s as i}from"./nile-file-preview.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{g as a}from"./utils/nile-file-preview.util.esm.js";import{F as r,a as l,b as o,c as n}from"./types/nile-file-preview.enums.esm.js";import{html as p}from"lit";import{g as c,a as m,b as d,c as f,d as u,e as y,f as v,h as w}from"./nile-file-preview.template.esm.js";let g=class extends s{constructor(){super(...arguments),this.errorMessage="",this.fileUrl="",this.uploadStatus=0,this.allowedTypes=[],this.state=r.DEFAULT,this.variant=l.HORIZONTAL,this.inputFileName="",this.inputFileHtml=null,this.originalUrl="",this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"})}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.emit(o.NILE_INIT)}updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?this.createUploadState(this.inputFile,this.uploadStatus):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(o.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(o.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile)}createUploadState(t,i){const s=this.variant===l.HORIZONTAL;this.inputFileHtml=s?c(t,i):m(t,i),this.requestUpdate()}async handleFileUrl(t){this.originalUrl=t;try{const i=await fetch(t),s=await i.blob(),e=this.inputFileName||t.split("/").pop()||n.UNKNOWN_FILE_NAME,h=new File([s],e,{type:s.type});this.createState(h)}catch(t){const i=new File([],this.inputFileName||n.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=n.FAILED_TO_LOAD,this.inputFileHtml=this.variant===l.HORIZONTAL?d(i,this.errorMessage,this.originalUrl):f(i,this.errorMessage,this.originalUrl),this.requestUpdate()}}async createState(t){const i=this.variant===l.HORIZONTAL;if(this.allowedTypes.includes(t.type)&&!this.errorMessage)if(t.type.startsWith("image/"))try{const s=await a(t);this.inputFileHtml=i?u(s,t,this.originalUrl):y(s,t,this.originalUrl)}catch(s){this.inputFileHtml=i?v(t,this.originalUrl):w(t,this.originalUrl)}else this.inputFileHtml=i?v(t,this.originalUrl):w(t,this.originalUrl);else this.errorMessage=this.errorMessage?n.UPLOAD_CANCEL:n.INVALID_FORMAT,this.inputFileHtml=i?d(t,this.errorMessage,this.originalUrl):f(t,this.errorMessage,this.originalUrl);this.requestUpdate()}render(){return p`
+import{__decorate as t}from"tslib";import{s as i}from"./nile-file-preview.css.esm.js";import{N as s}from"../internal/nile-element.esm.js";import{property as e,customElement as h}from"lit/decorators.js";import{g as a}from"./utils/nile-file-preview.util.esm.js";import{F as r,a as l,b as o,c as n}from"./types/nile-file-preview.enums.esm.js";import{html as p}from"lit";import{g as c,a as m,b as d,c as f,d as u,e as y,f as v,h as w}from"./nile-file-preview.template.esm.js";let g=class extends s{constructor(){super(...arguments),this.errorMessage="",this.fileUrl="",this.uploadStatus=0,this.allowedTypes=[],this.state=r.DEFAULT,this.variant=l.HORIZONTAL,this.inputFileName="",this.inputFileHtml=null,this.originalUrl="",this.dummyFile=new File(["sdfjbs ewhf"],"dummy.txt",{type:"text/plain"})}static get styles(){return[i]}connectedCallback(){super.connectedCallback(),this.emit(o.NILE_INIT)}updated(t){t.has("uploadStatus")&&this.uploadStatus?this.uploadStatus<100?(this.createUploadState(this.inputFile,this.uploadStatus),this.emit(o.NILE_UPLOADING)):this.createState(this.inputFile):t.has("inputFile")&&this.inputFile?(this.createState(this.inputFile),this.emit(o.NILE_RECEIVE)):t.has("fileUrl")&&this.fileUrl?(this.handleFileUrl(this.fileUrl),this.emit(o.NILE_RECEIVE)):t.has("errorMessage")&&this.createState(this.inputFile)}createUploadState(t,i){const s=this.variant===l.HORIZONTAL;this.inputFileHtml=s?c(t,i):m(t,i),this.requestUpdate()}async handleFileUrl(t){this.originalUrl=t;try{const i=await fetch(t),s=await i.blob(),e=this.inputFileName||t.split("/").pop()||n.UNKNOWN_FILE_NAME,h=new File([s],e,{type:s.type});this.createState(h)}catch(t){const i=new File([],this.inputFileName||n.UNKNOWN_FILE_NAME,{type:"application/octet-stream"});this.errorMessage=n.FAILED_TO_LOAD,this.inputFileHtml=this.variant===l.HORIZONTAL?d(i,this.errorMessage,this.originalUrl):f(i,this.errorMessage,this.originalUrl),this.requestUpdate()}}async createState(t){const i=this.variant===l.HORIZONTAL;if(this.allowedTypes.includes(t.type)&&!this.errorMessage)if(t.type.startsWith("image/"))try{const s=await a(t);this.inputFileHtml=i?u(s,t,this.originalUrl):y(s,t,this.originalUrl)}catch(s){this.inputFileHtml=i?v(t,this.originalUrl):w(t,this.originalUrl)}else this.inputFileHtml=i?v(t,this.originalUrl):w(t,this.originalUrl);else this.errorMessage=this.errorMessage?n.UPLOAD_CANCEL:n.INVALID_FORMAT,this.inputFileHtml=i?d(t,this.errorMessage,this.originalUrl):f(t,this.errorMessage,this.originalUrl);this.requestUpdate()}render(){return p`
 			${this.inputFileHtml?this.inputFileHtml:p``}
     `}disconnectedCallback(){super.disconnectedCallback(),this.emit(o.NILE_DESTROY)}};t([e({type:String})],g.prototype,"errorMessage",void 0),t([e({type:Object})],g.prototype,"inputFile",void 0),t([e({type:String})],g.prototype,"fileUrl",void 0),t([e({type:Number})],g.prototype,"uploadStatus",void 0),t([e({type:Array})],g.prototype,"allowedTypes",void 0),t([e({type:String})],g.prototype,"state",void 0),t([e({type:String})],g.prototype,"variant",void 0),t([e({type:String})],g.prototype,"inputFileName",void 0),g=t([h("nile-file-preview")],g);export{g as N};