@aquera/nile-elements 0.1.49-beta-1.0 → 0.1.49-beta-1.1

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    -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"}
+{"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-medium));\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-medium));\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-regular));\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-medium));\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-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, 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-regular));\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-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, var(--ng-font-weight-regular));\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-regular));\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-regular));\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-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, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-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: 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-regular));\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

@@ -134,7 +134,7 @@ import{css as r}from"lit";const e=r`
     display: flex;
     justify-content: space-between;
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
   }
 
   nile-progress-bar li span {
@@ -197,13 +197,13 @@ import{css as r}from"lit";const e=r`
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
   }
 
   .preview-file-info p:last-of-type{
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .preview nile-icon:hover {
@@ -260,13 +260,13 @@ import{css as r}from"lit";const e=r`
   .preview-file-info p {
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
   }
 
   .preview-file-info p:last-of-type{
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .no-preview > nile-icon:hover {
@@ -321,14 +321,14 @@ import{css as r}from"lit";const e=r`
   .file-info p {
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
   }
   
   .file-info > nile-tooltip > p {
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
   }
 
@@ -356,19 +356,19 @@ import{css as r}from"lit";const e=r`
   }
 
   .content-container h4 {
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .content-container p:first-child {
     margin: 0px;
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .content-container p:last-child {
     margin: 0px;
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
   }
 
@@ -484,7 +484,7 @@ import{css as r}from"lit";const e=r`
   .file-info-vertical-state p {
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     padding-bottom: 6px;
     text-align: center;
   }
@@ -492,7 +492,7 @@ import{css as r}from"lit";const e=r`
   .file-info-vertical-state > nile-tooltip > p {
     color: var(--nile-colors-red-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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
   }
 
@@ -504,7 +504,7 @@ import{css as r}from"lit";const e=r`
     gap: 8px;
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center
   }
 

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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    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:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      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-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\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-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\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    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\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  .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    width: 648px;\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  }\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: 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  .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-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .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  .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: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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: 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\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\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  }\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\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  }\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  .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: start;\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-sm);\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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    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:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      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-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\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-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\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-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\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-regular);\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    width: 648px;\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  }\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: 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-medium));\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-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .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  .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: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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: 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\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\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  }\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\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  }\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  .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: start;\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-sm);\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-file-upload.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-file-upload.css.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.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    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:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      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-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\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-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\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    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\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  .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    width: 648px;\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  }\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: 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  .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-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .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  .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: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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: 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\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\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  }\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\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  }\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  .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: start;\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-sm);\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-file-upload.css.cjs.js","sources":["../../../src/nile-file-upload/nile-file-upload.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    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:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      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-border {\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .vertical-div {\n    min-height: 156px;\n    height: auto;\n    min-width: 240px;\n    width: 240px;\n    display: flex !important;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\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    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    position: relative;\n  }\n\n  .vertical-div:hover {\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-primary-600, var(--ng-colors-border-brand));\n  }\n\n  .outer-div-border {\n    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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  .content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  .content h4 {\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-regular));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .content p {\n    margin: var(--nile-spacing-none, var(--ng-spacing-none));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));\n  }\n\n  /*  DISABLED STATE */\n  .disable {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n    pointer-events: none;\n  }\n\n  /* DRAGGING */\n  .dragging {\n    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));\n    border:\n      var(--nile-border-width-1, var(--ng-border-width-1))\n      var(--nile-border-style-dashed, var(--ng-border-style-solid))\n      var(--nile-colors-primary-600, var(--ng-colors-border-primary));\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 18px;\n    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));\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-regular);\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    width: 648px;\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  }\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: 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-medium));\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-sm));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n  }\n\n  /* PREVIEW STATE */\n  .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  .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: 42px;\n    width: 42px;\n  }\n\n  .preview-image-container img {\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: 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\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\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  }\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  }\n\n  .file-info p:last-of-type{\n    color: var(--nile-colors-red-700);\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .error > nile-icon:hover {\n    cursor: pointer;\n  }\n\n  /* VARTICAL STATE START */\n  /* Default State */\n\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  }\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  }\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  .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: start;\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-sm);\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  /* for the upload error messages */\n  .upload-error {\n    font-size: var(--nile-type-scale-2);\n    font-weight: var(--nile-font-weight-regular);\n    color: var(--nile-colors-red-500);\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: var(--nile-spacing-one-half-x);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -94,7 +94,7 @@ import{css as r}from"lit";const e=r`
   .content h4 {
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
@@ -125,7 +125,7 @@ import{css as r}from"lit";const e=r`
     gap: 18px;
     color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));
     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);
+    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-regular);
   }
 
   .icons-container {
@@ -178,7 +178,7 @@ import{css as r}from"lit";const e=r`
     display: flex;
     justify-content: space-between;
     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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
   }
 
   .progress-bar-container p {

package/dist/nile-form-group/nile-form-group.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-form-group.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,s,i,r,e,o,l,_templateObject,_templateObject2,_templateObject3,m;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;r=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileFormGroupCssCjsJs){o=_nileFormGroupCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",m=/*#__PURE__*/function(_l){function m(){var _this;_classCallCheck(this,m);_this=_callSuper(this,m,arguments),_this.title="",_this.subtitle="";return _this;}_inherits(m,_l);return _createClass(m,[{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div part=\"base\" class=\"form__base\">\n        ","\n        <div class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    "])),this.title?s(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <div class=\"form__header\">\n              <div class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> "," </slot>\n                ","\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider class=\"form__divider\"></nile-divider>\n            "])),this.title,this.subtitle?s(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ","\n                      </slot>\n                    "])),this.subtitle):""):"");}}],[{key:"styles",get:function get(){return[o];}}]);}(l));t([i(".form__body")],m.prototype,"nileformgroup",void 0),t([r({type:String,reflect:!0})],m.prototype,"title",void 0),t([r({type:String,reflect:!0})],m.prototype,"subtitle",void 0),_export("N",m=t([e("nile-form-group")],m));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-form-group.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,s,r,i,e,o,l,_templateObject,_templateObject2,_templateObject3,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.query;i=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileFormGroupCssCjsJs){o=_nileFormGroupCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",a=/*#__PURE__*/function(_l){function a(){var _this;_classCallCheck(this,a);_this=_callSuper(this,a,arguments),_this.title="",_this.subtitle="";return _this;}_inherits(a,_l);return _createClass(a,[{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div part=\"base\" class=\"form__base\">\n        ","\n        <div part=\"body\" class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    "])),this.title?s(_templateObject2||(_templateObject2=_taggedTemplateLiteral([" <div part=\"header\" class=\"form__header\">\n              <div part=\"content\" class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> "," </slot>\n                ","\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider part=\"divider\" class=\"form__divider\"></nile-divider>\n            "])),this.title,this.subtitle?s(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ","\n                      </slot>\n                    "])),this.subtitle):""):"");}}],[{key:"styles",get:function get(){return[o];}}]);}(l));t([r(".form__body")],a.prototype,"nileformgroup",void 0),t([i({type:String,reflect:!0})],a.prototype,"title",void 0),t([i({type:String,reflect:!0})],a.prototype,"subtitle",void 0),_export("N",a=t([e("nile-form-group")],a));}};});
 //# sourceMappingURL=nile-form-group.cjs.js.map

package/dist/nile-form-group/nile-form-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-group.cjs.js","sources":["../../../src/nile-form-group/nile-form-group.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-form-group.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile Form Group component.\n *\n * @tag nile-form-group\n *\n */\n@customElement('nile-form-group')\nexport class NileFormGroup extends NileElement {\n  @query('.form__body') nileformgroup: HTMLInputElement;\n\n  /**\n   * The styles for FormGroup\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** The Form Title . If you need to display HTML, use the `title` slot instead. */\n  @property({ type: String, reflect: true }) title = '';\n\n  /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */\n  @property({ type: String, reflect: true }) subtitle = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"form__base\">\n        ${this.title\n          ? html` <div class=\"form__header\">\n              <div class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> ${this.title} </slot>\n                ${this.subtitle\n                  ? html`\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ${this.subtitle}\n                      </slot>\n                    `\n                  : ``}\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider class=\"form__divider\"></nile-divider>\n            `\n          : ``}\n        <div class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileFormGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-group': NileFormGroup;\n  }\n}\n"],"names":["NileFormGroup","_l","m","constructor","this","title","subtitle","_this","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","styles","NileElement","__decorate","query","prototype","property","type","String","reflect","customElement"],"mappings":"ksGAuBaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAYsCC,KAAAA,CAAKC,KAAG,CAAA,EAAA,CAGRD,KAAAA,CAAQE,QAAAA,CAAG,EAwCvD,QAAAC,KAAA,EAhDQC,SAAA,CAAAN,CAAA,CAAAD,EAAA,SAAAQ,YAAA,CAAAP,CAAA,GAAAQ,GAAA,UAAAC,KAAA,CAmBA,SAAAC,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,sKAELX,IAAAA,CAAKC,MACHQ,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,uXAE0CX,IAAKC,CAAAA,KAAAA,CAC7CD,IAAAA,CAAKE,SACHO,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,mKAEEX,IAAKE,CAAAA,QAAAA,EAGX,EAAA,EAOR,EAAA,EAMT,CAAA,KAAAI,GAAA,UAAAQ,GAAA,CA7CM,SAAAA,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAiBM,MA1B0BC,IACXC,EAAA,CAArBC,CAAAA,CAAM,aAA+CtB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuB,UAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAWXF,CAAA,CAAA,CAA1CG,EAAS,CAAEC,IAAAA,CAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,KAAmB3B,CAAAuB,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAGXF,EAAA,CAA1CG,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAsB3B,CAAAuB,CAAAA,SAAAA,CAAA,eAAA,EAf9CvB,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAaqB,EAAA,CADzBO,CAAAA,CAAc,oBACF5B"}
+{"version":3,"file":"nile-form-group.cjs.js","sources":["../../../src/nile-form-group/nile-form-group.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-form-group.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile Form Group component.\n *\n * @tag nile-form-group\n *\n */\n@customElement('nile-form-group')\nexport class NileFormGroup extends NileElement {\n  @query('.form__body') nileformgroup: HTMLInputElement;\n\n  /**\n   * The styles for FormGroup\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** The Form Title . If you need to display HTML, use the `title` slot instead. */\n  @property({ type: String, reflect: true }) title = '';\n\n  /** The Form subtitle . If you need to display HTML, use the `subtitle` slot instead. */\n  @property({ type: String, reflect: true }) subtitle = '';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"form__base\">\n        ${this.title\n          ? html` <div part=\"header\" class=\"form__header\">\n              <div part=\"content\" class=\"form__title-content\">\n                <slot name=\"title\" class=\"form__title\"> ${this.title} </slot>\n                ${this.subtitle\n                  ? html`\n                      <slot name=\"subtitle\" class=\"form__subtitle\">\n                        ${this.subtitle}\n                      </slot>\n                    `\n                  : ``}\n              </div>\n\n              <slot name=\"action\" class=\"form__action\"></slot>\n            </div>\n            <nile-divider part=\"divider\" class=\"form__divider\"></nile-divider>\n            `\n          : ``}\n        <div part=\"body\" class=\"form__body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileFormGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-form-group': NileFormGroup;\n  }\n}\n"],"names":["NileFormGroup","_l","a","constructor","this","title","subtitle","_this","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","_templateObject2","_templateObject3","get","styles","NileElement","__decorate","query","prototype","property","type","String","reflect","customElement"],"mappings":"ksGAuBaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,qCAYsCC,KAAAA,CAAKC,KAAG,CAAA,EAAA,CAGRD,KAAAA,CAAQE,QAAAA,CAAG,EAwCvD,QAAAC,KAAA,EAhDQC,SAAA,CAAAN,CAAA,CAAAD,EAAA,SAAAQ,YAAA,CAAAP,CAAA,GAAAQ,GAAA,UAAAC,KAAA,CAmBA,SAAAC,MAAAA,CAAAA,CAAAA,CACL,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,oLAELX,IAAAA,CAAKC,MACHQ,CAAI,CAAAG,gBAAA,GAAAA,gBAAA,CAAAD,sBAAA,yaAE0CX,IAAKC,CAAAA,KAAAA,CAC7CD,IAAAA,CAAKE,SACHO,CAAI,CAAAI,gBAAA,GAAAA,gBAAA,CAAAF,sBAAA,mKAEEX,IAAKE,CAAAA,QAAAA,EAGX,EAAA,EAOR,EAAA,EAMT,CAAA,KAAAI,GAAA,UAAAQ,GAAA,CA7CM,SAAAA,IAAA,CACL,CAAA,MAAO,CAACC,CACT,CAAA,EAiBM,MA1B0BC,IACXC,EAAA,CAArBC,CAAAA,CAAM,aAA+CtB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAuB,UAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAWXF,CAAA,CAAA,CAA1CG,EAAS,CAAEC,IAAAA,CAAMC,MAAQC,CAAAA,OAAAA,CAAAA,CAAS,KAAmB3B,CAAAuB,CAAAA,SAAAA,CAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAGXF,EAAA,CAA1CG,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAAQC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAsB3B,CAAAuB,CAAAA,SAAAA,CAAA,eAAA,EAf9CvB,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAaqB,EAAA,CADzBO,CAAAA,CAAc,oBACF5B"}

package/dist/nile-form-group/nile-form-group.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    --min-width: 288px;\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  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:center;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    --min-width: 288px;\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  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:center;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-form-group.css.cjs.js.map

package/dist/nile-form-group/nile-form-group.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-group.css.cjs.js","sources":["../../../src/nile-form-group/nile-form-group.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 * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\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  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:center;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n`;\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-form-group.css.cjs.js","sources":["../../../src/nile-form-group/nile-form-group.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 * FormGroup CSS\n */\nexport const styles = css`\n  :host {\n    --min-width: 288px;\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  .form__base {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--min-width);\n    width: max-content;\n    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .form__header {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  }\n\n  .form__divider {\n    width: 100%;\n  }\n\n  .form__divider::part(divider) {\n    width: 100%;\n    height: 1px;\n    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .form__title-content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));\n    justify-content:center;\n  }\n\n  .form__title {\n    display: block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));\n    letter-spacing: 0.2px;\n  }\n\n  .form__subtitle {\n    display: block;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form__body {\n    width: 100%;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));\n  }\n`;\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-form-group/nile-form-group.css.esm.js

@@ -54,7 +54,7 @@ import{css as i}from"lit";const n=i`
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
     line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
     letter-spacing: 0.2px;
   }
@@ -65,7 +65,7 @@ import{css as i}from"lit";const n=i`
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }

package/dist/nile-form-group/nile-form-group.esm.js

@@ -1,7 +1,7 @@
-import{__decorate as t}from"tslib";import{html as s}from"lit";import{query as i,property as e,customElement as r}from"lit/decorators.js";import{s as o}from"./nile-form-group.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let m=class extends l{constructor(){super(...arguments),this.title="",this.subtitle=""}static get styles(){return[o]}render(){return s`
+import{__decorate as t}from"tslib";import{html as s}from"lit";import{query as r,property as e,customElement as i}from"lit/decorators.js";import{s as o}from"./nile-form-group.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";let a=class extends l{constructor(){super(...arguments),this.title="",this.subtitle=""}static get styles(){return[o]}render(){return s`
       <div part="base" class="form__base">
-        ${this.title?s` <div class="form__header">
-              <div class="form__title-content">
+        ${this.title?s` <div part="header" class="form__header">
+              <div part="content" class="form__title-content">
                 <slot name="title" class="form__title"> ${this.title} </slot>
                 ${this.subtitle?s`
                       <slot name="subtitle" class="form__subtitle">
@@ -12,10 +12,10 @@ import{__decorate as t}from"tslib";import{html as s}from"lit";import{query as i,
 
               <slot name="action" class="form__action"></slot>
             </div>
-            <nile-divider class="form__divider"></nile-divider>
+            <nile-divider part="divider" class="form__divider"></nile-divider>
             `:""}
-        <div class="form__body">
+        <div part="body" class="form__body">
           <slot></slot>
         </div>
       </div>
-    `}};t([i(".form__body")],m.prototype,"nileformgroup",void 0),t([e({type:String,reflect:!0})],m.prototype,"title",void 0),t([e({type:String,reflect:!0})],m.prototype,"subtitle",void 0),m=t([r("nile-form-group")],m);export{m as N};
+    `}};t([r(".form__body")],a.prototype,"nileformgroup",void 0),t([e({type:String,reflect:!0})],a.prototype,"title",void 0),t([e({type:String,reflect:!0})],a.prototype,"subtitle",void 0),a=t([i("nile-form-group")],a);export{a as N};

package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\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  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\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  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-form-help-text.css.cjs.js.map

package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-form-help-text.css.cjs.js","sources":["../../../src/nile-form-help-text/nile-form-help-text.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 * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\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  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-form-help-text.css.cjs.js","sources":["../../../src/nile-form-help-text/nile-form-help-text.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 * FormHelpText CSS\n */\nexport const styles = css`\n  :host {\n    width:100%;\n    color: var(--nile-form-help-text-color, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-form-help-text-font-size, var(--ng-font-size-text-sm));\n    font-style: normal;\n    line-height: var(--nile-form-help-text-line-height, var(--ng-line-height-text-sm));\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  .nile-form-help-text {\n    display:flex;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    letter-spacing: 0.2px;\n    margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));\n    margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    width: auto;\n  }\n\n\n  .nile-form-help-text--expanded{\n    display:block;\n  }\n\n  .nile-form-help-text__more-button {\n    display: inline-flex;\n    gap: var(--nile-spacing-xs,var(--ng-spacing-xs));\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-brand-500));\n    cursor: pointer;\n    white-space: nowrap;\n    align-items: center;\n  }\n\n  .help__text__full{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:inline;\n  }\n\n  .help__text__full--expanded{\n    white-space: wrap;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-form-help-text/nile-form-help-text.css.esm.js

@@ -13,7 +13,7 @@ import{css as e}from"lit";const t=e`
 
   .nile-form-help-text {
     display:flex;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     letter-spacing: 0.2px;
     margin-top: var(--nile-spacing-sm, var(--ng-spacing-sm));
     margin-right: var(--nile-spacing-xs, var(--ng-spacing-xs));

package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-inline-edit.css.cjs.js.map

package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-edit.css.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-inline-edit.css.cjs.js","sources":["../../../src/nile-inline-edit/nile-inline-edit.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 * InlineEdit CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\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  .inline__edit--label {\n    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n    margin-bottom: var(--nile-spacing-sm);\n  }\n\n  .inline__edit--open--container {\n    display: block;\n    width: var(--nile-width-width-xxs, var(--ng-spacing-80));\n    box-sizing: border-box;\n  }\n\n  .inline__edit--container {\n    box-sizing: border-box;\n    width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-width: var(--nile-width-width-xxs, var(--ng-width-80));\n    min-height: var(--nile-height-40px, var(--ng-height-40px));\n    height: auto;\n    padding-top: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));\n    word-wrap: break-word;\n  }\n\n  .inline__edit--container:hover {\n    background-color:var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-inline-edit/nile-inline-edit.css.esm.js

@@ -11,7 +11,7 @@ import{css as n}from"lit";const i=n`
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
     margin-bottom: var(--nile-spacing-sm);
   }
@@ -37,7 +37,7 @@ import{css as n}from"lit";const i=n`
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
     word-wrap: break-word;
   }