@devino.solutions/upup
Version:
470 lines (454 loc) • 134 kB
JavaScript
import React, { createContext, useContext, useState, useCallback, useRef, useEffect, useMemo, Component, memo, forwardRef } from 'react';
import { TbUser, TbSearch, TbFolder, TbFile, TbFileTypeBmp, TbFileTypeCss, TbFileTypeCsv, TbFileTypeDocx, TbFileTypeHtml, TbFileTypeJpg, TbFileTypeJs, TbFileTypeJsx, TbFileTypePdf, TbFileTypePng, TbFileTypePhp, TbFileTypePpt, TbFileTypeRs, TbFileTypeSql, TbFileTypeSvg, TbFileTypeTs, TbFileTypeTsx, TbFileTypeTxt, TbFileTypeVue, TbFileTypeXls, TbFileTypeXml, TbFileTypeZip, TbPlus, TbTrash, TbCapture, TbCameraRotate, TbLoader } from 'react-icons/tb';
import { ToastContainer, toast } from 'react-toastify';
import { AnimatePresence, motion } from 'framer-motion';
import Webcam from 'react-webcam';
import { v4 } from 'uuid';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import load from 'load-script';
import pako from 'pako';
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
import { Client } from '@microsoft/microsoft-graph-client';
import { AuthCodeMSALBrowserAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser';
import truncate from 'truncate';
import FileViewer from 'react-file-viewer';
import { createPortal } from 'react-dom';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n} /*\n! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com\n*/ /*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n::before,\n::after {\n --tw-content: '';\n} /*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n} /*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n} /*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n} /*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n} /*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n} /*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n} /*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n} /*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n} /*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n} /*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n} /*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n} /*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n} /*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n} /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n} /*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n} /*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n} /*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n} /*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n} /*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n} /*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n} /*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n} /*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n} /*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n} /*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n} /*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n} /*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n} /*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n} /*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n} /*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n} /*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n} /* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.shadow-wrapper {\n box-shadow:\n 0px 4px 50px 0px rgba(0, 0, 0, 0.08),\n 0px 4px 6px 0px rgba(0, 0, 0, 0.05);\n }\n.preview-scroll {\n /* width */\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: #eaeaea;\n border-radius: 10px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: #c5cafb;\n border-radius: 10px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: #c5cafb;\n }\n }\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.inset-0 {\n inset: 0px;\n}\n.-right-2 {\n right: -0.5rem;\n}\n.-right-\\[10px\\] {\n right: -10px;\n}\n.-top-2 {\n top: -0.5rem;\n}\n.-top-\\[10px\\] {\n top: -10px;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.left-5 {\n left: 1.25rem;\n}\n.right-0 {\n right: 0px;\n}\n.top-0 {\n top: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.z-10 {\n z-index: 10;\n}\n.z-\\[2147483647\\] {\n z-index: 2147483647;\n}\n.col-span-4 {\n grid-column: span 4 / span 4;\n}\n.col-start-1 {\n grid-column-start: 1;\n}\n.col-start-3 {\n grid-column-start: 3;\n}\n.col-end-3 {\n grid-column-end: 3;\n}\n.col-end-5 {\n grid-column-end: 5;\n}\n.row-start-2 {\n grid-row-start: 2;\n}\n.m-4 {\n margin: 1rem;\n}\n.mb-0 {\n margin-bottom: 0px;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n.aspect-video {\n aspect-ratio: 16 / 9;\n}\n.h-0 {\n height: 0px;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-\\[397px\\] {\n height: 397px;\n}\n.h-\\[480px\\] {\n height: 480px;\n}\n.h-\\[6px\\] {\n height: 6px;\n}\n.h-\\[90vh\\] {\n height: 90vh;\n}\n.h-fit {\n height: -moz-fit-content;\n height: fit-content;\n}\n.h-full {\n height: 100%;\n}\n.min-h-fit {\n min-height: -moz-fit-content;\n min-height: fit-content;\n}\n.w-1\\/3 {\n width: 33.333333%;\n}\n.w-14 {\n width: 3.5rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[90vw\\] {\n width: 90vw;\n}\n.w-full {\n width: 100%;\n}\n.max-w-\\[280px\\] {\n max-width: 280px;\n}\n.max-w-\\[600px\\] {\n max-width: 600px;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.origin-bottom {\n transform-origin: bottom;\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-75 {\n --tw-scale-x: .75;\n --tw-scale-y: .75;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-90 {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes pulse {\n 50% {\n opacity: .5;\n }\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.grid-cols-\\[1fr\\2c auto\\] {\n grid-template-columns: 1fr auto;\n}\n.grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n}\n.grid-rows-\\[auto\\2c 1fr\\2c auto\\] {\n grid-template-rows: auto 1fr auto;\n}\n.grid-rows-\\[auto\\2c 1fr\\] {\n grid-template-rows: auto 1fr;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-col-reverse {\n flex-direction: column-reverse;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-\\[5px\\] {\n gap: 5px;\n}\n.gap-\\[6px\\] {\n gap: 6px;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-y-scroll {\n overflow-y: scroll;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-wrap {\n text-wrap: wrap;\n}\n.break-all {\n word-break: break-all;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[4px\\] {\n border-radius: 4px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-b-\\[4px\\] {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n}\n.rounded-b-lg {\n border-bottom-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n}\n.rounded-l {\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n.rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n}\n.rounded-t-none {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}\n.border {\n border-width: 1px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-dashed {\n border-style: dashed;\n}\n.border-\\[\\#1849D6\\] {\n --tw-border-opacity: 1;\n border-color: rgb(24 73 214 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#30C5F7\\] {\n --tw-border-opacity: 1;\n border-color: rgb(48 197 247 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#6D6D6D\\] {\n --tw-border-opacity: 1;\n border-color: rgb(109 109 109 / var(--tw-border-opacity, 1));\n}\n.border-\\[\\#e0e0e0\\] {\n --tw-border-opacity: 1;\n border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#045671\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(4 86 113 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#1F1F1F\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#232323\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(35 35 35 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#272727\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(39 39 39 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#30C5F7\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(48 197 247 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#323232\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(50 50 50 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#59D1F9\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(89 209 249 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#8EA5E7\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(142 165 231 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#E7ECFC\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(231 236 252 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#F5F5F5\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[\\#bab4b499\\] {\n background-color: #bab4b499;\n}\n.bg-\\[\\#e9ecef00\\] {\n background-color: #e9ecef00;\n}\n.bg-black\\/40 {\n background-color: rgb(0 0 0 / 0.4);\n}\n.bg-black\\/\\[0\\.025\\] {\n background-color: rgb(0 0 0 / 0.025);\n}\n.bg-black\\/\\[0\\.075\\] {\n background-color: rgb(0 0 0 / 0.075);\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-white\\/10 {\n background-color: rgb(255 255 255 / 0.1);\n}\n.bg-white\\/5 {\n background-color: rgb(255 255 255 / 0.05);\n}\n.bg-contain {\n background-size: contain;\n}\n.bg-center {\n background-position: center;\n}\n.bg-no-repeat {\n background-repeat: no-repeat;\n}\n.object-contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.p-0 {\n padding: 0px;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.pl-8 {\n padding-left: 2rem;\n}\n.pt-0 {\n padding-top: 0px;\n}\n.pt-10 {\n padding-top: 2.5rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-\\[72px\\] {\n padding-top: 72px;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n.text-5xl {\n font-size: 3rem;\n line-height: 1;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.leading-5 {\n line-height: 1.25rem;\n}\n.text-\\[\\#0061d5\\] {\n --tw-text-opacity: 1;\n color: rgb(0 97 213 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#0061fe\\] {\n --tw-text-opacity: 1;\n color: rgb(0 97 254 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#0B0B0B\\] {\n --tw-text-opacity: 1;\n color: rgb(11 11 11 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#0E2ADD\\] {\n --tw-text-opacity: 1;\n color: rgb(14 42 221 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#111\\] {\n --tw-text-opacity: 1;\n color: rgb(17 17 17 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#1b5dab\\] {\n --tw-text-opacity: 1;\n color: rgb(27 93 171 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#2275d7\\] {\n --tw-text-opacity: 1;\n color: rgb(34 117 215 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#242634\\] {\n --tw-text-opacity: 1;\n color: rgb(36 38 52 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#2c3e50\\] {\n --tw-text-opacity: 1;\n color: rgb(44 62 80 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#30C5F7\\] {\n --tw-text-opacity: 1;\n color: rgb(48 197 247 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#333\\] {\n --tw-text-opacity: 1;\n color: rgb(51 51 51 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#59D1F9\\] {\n --tw-text-opacity: 1;\n color: rgb(89 209 249 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#6D6D6D\\] {\n --tw-text-opacity: 1;\n color: rgb(109 109 109 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#8030a3\\] {\n --tw-text-opacity: 1;\n color: rgb(128 48 163 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#939393\\] {\n --tw-text-opacity: 1;\n color: rgb(147 147 147 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#FAFAFA\\] {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#e0e0e0\\] {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#f5f5f5\\] {\n --tw-text-opacity: 1;\n color: rgb(245 245 245 / var(--tw-text-opacity, 1));\n}\n.text-\\[\\#fafafa\\] {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity, 1));\n}\n.text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-yellow-500 {\n --tw-text-opacity: 1;\n color: rgb(234 179 8 / var(--tw-text-opacity, 1));\n}\n.opacity-70 {\n opacity: 0.7;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\@container\\/main {\n container-type: inline-size;\n container-name: main;\n}\n.shadow-top {\n box-shadow: 0 -1px 0 0 rgba(128, 128, 128, 0.35);\n }\n.shadow-right {\n box-shadow: 1px 0 0 0 rgba(128, 128, 128, 0.35);\n }\n.shadow-bottom {\n box-shadow: 0 1px 0 0 rgba(128, 128, 128, 0.35);\n }\n.shadow-left {\n box-shadow: -1px 0 0 0 rgba(128, 128, 128, 0.35);\n }\n.hover\\:bg-\\[\\#bab4b499\\]:hover {\n background-color: #bab4b499;\n}\n.hover\\:bg-gray-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.hover\\:underline:hover {\n text-decoration-line: underline;\n}\n@keyframes pulse {\n 50% {\n opacity: .5;\n }\n}\n.disabled\\:animate-pulse:disabled {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.disabled\\:bg-\\[\\#6D6D6D\\]:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(109 109 109 / var(--tw-bg-opacity, 1));\n}\n.disabled\\:bg-\\[\\#e0e0e0\\]:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(224 224 224 / var(--tw-bg-opacity, 1));\n}\n.group:hover .group-hover\\:scale-90 {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.group:hover .group-hover\\:underline {\n text-decoration-line: underline;\n}\n@container main (min-width: 475px) {\n .\\@cs\\/main\\:static {\n position: static;\n }\n .\\@cs\\/main\\:relative {\n position: relative;\n }\n .\\@cs\\/main\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n .\\@cs\\/main\\:col-start-4 {\n grid-column-start: 4;\n }\n .\\@cs\\/main\\:col-end-2 {\n grid-column-end: 2;\n }\n .\\@cs\\/main\\:row-start-1 {\n grid-row-start: 1;\n }\n .\\@cs\\/main\\:block {\n display: block;\n }\n .\\@cs\\/main\\:grid {\n display: grid;\n }\n .\\@cs\\/main\\:hidden {\n display: none;\n }\n .\\@cs\\/main\\:w-\\[400px\\] {\n width: 400px;\n }\n .\\@cs\\/main\\:w-full {\n width: 100%;\n }\n .\\@cs\\/main\\:basis-32 {\n flex-basis: 8rem;\n }\n .\\@cs\\/main\\:scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n .\\@cs\\/main\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .\\@cs\\/main\\:grid-rows-1 {\n grid-template-rows: repeat(1, minmax(0, 1fr));\n }\n .\\@cs\\/main\\:flex-row {\n flex-direction: row;\n }\n .\\@cs\\/main\\:flex-col {\n flex-direction: column;\n }\n .\\@cs\\/main\\:flex-wrap {\n flex-wrap: wrap;\n }\n .\\@cs\\/main\\:items-center {\n align-items: center;\n }\n .\\@cs\\/main\\:justify-center {\n justify-content: center;\n }\n .\\@cs\\/main\\:gap-14 {\n gap: 3.5rem;\n }\n .\\@cs\\/main\\:gap-2 {\n gap: 0.5rem;\n }\n .\\@cs\\/main\\:gap-\\[30px\\] {\n gap: 30px;\n }\n .\\@cs\\/main\\:gap-y-6 {\n row-gap: 1.5rem;\n }\n .\\@cs\\/main\\:rounded-lg {\n border-radius: 0.5rem;\n }\n .\\@cs\\/main\\:rounded-none {\n border-radius: 0px;\n }\n .\\@cs\\/main\\:rounded-r {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n }\n .\\@cs\\/main\\:border-none {\n border-style: none;\n }\n .\\@cs\\/main\\:bg-transparent {\n background-color: transparent;\n }\n .\\@cs\\/main\\:p-0 {\n padding: 0px;\n }\n .\\@cs\\/main\\:p-\\[6px\\] {\n padding: 6px;\n }\n .\\@cs\\/main\\:px-\\[30px\\] {\n padding-left: 30px;\n padding-right: 30px;\n }\n .\\@cs\\/main\\:pt-0 {\n padding-top: 0px;\n }\n .\\@cs\\/main\\:pt-11 {\n padding-top: 2.75rem;\n }\n .\\@cs\\/main\\:text-8xl {\n font-size: 6rem;\n line-height: 1;\n }\n .\\@cs\\/main\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n .\\@cs\\/main\\:shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .\\@cs\\/main\\:shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n }\n .group:hover .\\@cs\\/main\\:group-hover\\:scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n }\n}\n.dark\\:border-\\[\\#30C5F7\\]:is(.dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(48 197 247 / var(--tw-border-opacity, 1));\n}\n.dark\\:border-\\[\\#6D6D6D\\]:is(.dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(109 109 109 / var(--tw-border-opacity, 1));\n}\n.dark\\:bg-\\[\\#045671\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(4 86 113 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-\\[\\#1F1F1F\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-\\[\\#232323\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(35 35 35 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-\\[\\#30C5F7\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(48 197 247 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-\\[\\#323232\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(50 50 50 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-\\[\\#59D1F9\\]:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(89 209 249 / var(--tw-bg-opacity, 1));\n}\n.dark\\:bg-white\\/10:is(.dark *) {\n background-color: rgb(255 255 255 / 0.1);\n}\n.dark\\:bg-white\\/5:is(.dark *) {\n background-color: rgb(255 255 255 / 0.05);\n}\n.dark\\:text-\\[\\#30C5F7\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(48 197 247 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-\\[\\#59D1F9\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(89 209 249 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-\\[\\#6D6D6D\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(109 109 109 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-\\[\\#FAFAFA\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-\\[\\#e0e0e0\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(224 224 224 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-\\[\\#fafafa\\]:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(250 250 250 / var(--tw-text-opacity, 1));\n}\n.dark\\:text-white:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.dark\\:disabled\\:bg-\\[\\#6D6D6D\\]:disabled:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(109 109 109 / var(--tw-bg-opacity, 1));\n}\n@container main (min-width: 475px) {\n .\\@cs\\/main\\:dark\\:bg-transparent:is(.dark *) {\n background-color: transparent;\n }\n}\n.\\[\\&_button\\]\\:top-1\\/2 button {\n top: 50%;\n}\n.\\[\\&_button\\]\\:-translate-y-1\\/2 button {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n";
styleInject(css_248z,{"insertAt":"top"});
var UploadStatus;
(function (UploadStatus) {
UploadStatus["PENDING"] = "PENDING";
UploadStatus["ONGOING"] = "ONGOING";
UploadStatus["SUCCESSFUL"] = "SUCCESSFUL";
UploadStatus["FAILED"] = "FAILED";
})(UploadStatus || (UploadStatus = {}));
const RootContext = /*#__PURE__*/createContext({
props: {},
files: /*#__PURE__*/new Map()
});
function useRootContext() {
const contextValue = useContext(RootContext);
return contextValue;
}
var UploadAdapter;
(function (UploadAdapter) {
UploadAdapter["INTERNAL"] = "INTERNAL";
UploadAdapter["GOOGLE_DRIVE"] = "GOOGLE_DRIVE";
UploadAdapter["ONE_DRIVE"] = "ONE_DRIVE";
UploadAdapter["LINK"] = "LINK";
UploadAdapter["CAMERA"] = "CAMERA";
// DROPBOX = 'DROPBOX',
// UNSPLASH = 'UNSPLASH',
// BOX = 'BOX',
})(UploadAdapter || (UploadAdapter = {}));
var UpupProvider;
(function (UpupProvider) {
UpupProvider["AWS"] = "aws";
UpupProvider["Azure"] = "azure";
UpupProvider["BackBlaze"] = "backblaze";
UpupProvider["DigitalOcean"] = "digitalocean";
})(UpupProvider || (UpupProvider = {}));
var UploadErrorType;
(function (UploadErrorType) {
UploadErrorType["PERMISSION_ERROR"] = "PERMISSION_ERROR";
UploadErrorType["EXPIRED_URL"] = "EXPIRED_URL";
UploadErrorType["FILE_VALIDATION_ERROR"] = "FILE_VALIDATION_ERROR";
UploadErrorType["PRESIGNED_URL_ERROR"] = "PRESIGNED_URL_ERROR";
UploadErrorType["SIGNED_URL_ERROR"] = "SIGNED_URL_ERROR";
UploadErrorType["CORS_CONFIG_ERROR"] = "CORS_CONFIG_ERROR";
UploadErrorType["TEMPORARY_CREDENTIALS_ERROR"] = "TEMPORARY_CREDENTIALS_ERROR";
UploadErrorType["UNKNOWN_UPLOAD_ERROR"] = "UNKNOWN_UPLOAD_ERROR";
})(UploadErrorType || (UploadErrorType = {}));
class UploadError extends Error {
constructor(message, type, retryable, status) {
if (type === void 0) {
type = UploadErrorType.UNKNOWN_UPLOAD_ERROR;
}
if (retryable === void 0) {
retryable = false;
}
super(message);
this.type = type;
this.retryable = retryable;
this.status = status;
this.DEFAULT_ERROR_STATUS_CODE = 500;
this.name = 'UploadError';
this.status = status || this.DEFAULT_ERROR_STATUS_CODE;
}
}
function useFetchFileByUrl() {
const {
props: {
onError
}
} = useRootContext();
const [loading, setLoading] = useState(false);
const fetchImage = useCallback(async url => {
if (loading) return;
try {
setLoading(true);
const response = await fetch(url);
const blob = await response.blob();
const extension = blob.type.split('/')[1];
const file = new File([blob], `${v4()}.${extension}`, {
type: blob.type
});
return file;
} catch (error) {
onError(error.message);
return;
} finally {
setLoading(false);
}
}, [loading, onError]);
return {
loading,
fetchImage
};
}
var FacingMode;
(function (FacingMode) {
FacingMode["Environment"] = "environment";
FacingMode["User"] = "user";
})(FacingMode || (FacingMode = {}));
function useCameraUploader() {
const {
setFiles,
setActiveAdapter,
props
} = useRootContext();
const {
fetchImage
} = useFetchFileByUrl();
const webcamRef = useRef(null);
const [url, setUrl] = useState('');
const [facingMode, setFacingMode] = useState(FacingMode.Environment);
const newCameraSide = facingMode === FacingMode.Environment ? 'front' : 'back';
const clearUrl = () => setUrl('');
const capture = async () => {
var _webcamRef$current;
const url = (_webcamRef$current = webcamRef.current) == null ? void 0 : _webcamRef$current.getScreenshot();
if (!url) return;
setUrl(url);
};
const handleFetchImage = async () => {
const file = await fetchImage(url);
if (file) {
setFiles([file]);
setUrl('');
setActiveAdapter(undefined);
}
};
const handleCameraSwitch = () => setFacingMode(prevState => prevState === FacingMode.Environment ? FacingMode.User : FacingMode.Environment);
return {
url,
webcamRef,
facingMode,
capture,
handleFetchImage,
clearUrl,
handleCameraSwitch,
newCameraSide,
props
};
}
function cn() {
for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
inputs[_key] = arguments[_key];
}
return twMerge(clsx(inputs));
}
function AdapterViewContainer(_ref) {
let {
children,
isLoading = false
} = _ref;
const {
props: {
dark,
classNames
}
} = useRootContext();
return /*#__PURE__*/React.createElement("div", {
className: cn('flex items-center justify-center overflow-hidden bg-black/[0.075]', {
'bg-white/10 text-[#FAFAFA] dark:bg-white/10 dark:text-[#FAFAFA]': isLoading && dark,
[classNames.adapterView]: !isLoading && classNames.adapterView,
[classNames.driveLoading]: isLoading && classNames.driveLoading
})
}, children);
}
function ShouldRender(_ref) {
let {
children,
if: condition,
isLoading = false
} = _ref;
const {
props: {
icons: {
LoaderIcon
}
}
} = useRootContext();
if (isLoading) return /*#__PURE__*/React.createElement(LoaderIcon, null);
if (!condition) return null;
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
}
function CameraUploader() {
const {
capture,
handleFetchImage,
clearUrl,
handleCameraSwitch,
newCameraSide,
url,
webcamRef,
facingMode,
props: {
dark,
classNames,
icons: {
CameraCaptureIcon,
CameraDeleteIcon,
CameraRotateIcon
}
}
} = useCameraUploader();
return /*#__PURE__*/React.createElement(AdapterViewContainer, null, /*#__PURE__*/React.createElement("div", {
className: "flex h-full w-full flex-col justify-center overflow-auto px-3 py-2"
}, /*#__PURE__*/React.createElement("div", {
className: "flex-1 pt-10"
}, /*#__PURE__*/React.createElement(ShouldRender, {
if: !!url
}, /*#__PURE__*/React.createElement("div", {
className: cn('relative aspect-video bg-black/[0.025] bg-contain bg-center bg-no-repeat shadow-xl', {
'bg-white/5 dark:bg-white/5': dark
}, classNames.cameraPreviewContainer),
style: {
backgroundImage: `url(${url})`
}
}, /*#__PURE__*/React.createElement("button", {
onClick: clearUrl,
className: cn('absolute -right-2 -top-2 z-10 rounded-full bg-[#272727] p-1 text-xl text-[#f5f5f5]', classNames.cameraDeleteButton),
type: "button"
}, /*#__PURE__*/React.createElement(CameraDeleteIcon, null)))), /*#__PURE__*/React.createElement(ShouldRender, {
if: !url
}, /*#__PURE__*/React.createElement(Webcam, {
audio: false,
ref: webcamRef,
screenshotFormat: "image/jpeg",
videoConstraints: {
facingMode
},
className: "aspect-video rounded-xl"
}))), /*#__PURE__*/React.createElement("div", {
className: "flex gap-4"
}, /*#__PURE__*/React.createElement(ShouldRender, {
if: !url
}, /*#__PURE__*/React.createElement("button", {
className: cn('mt-2 flex w-1/3 flex-col items-center justify-center rounded-md bg-blue-600 p-2 text-white transition-all duration-300', {
'bg-[#59D1F9] dark:bg-[#59D1F9]': dark
}, classNames.cameraCaptureButton),
onClick: capture,
type: "button"
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CameraCaptureIcon, null)), /*#__PURE__*/React.createElement("span", null, "Capture")), /*#__PURE__*/React.createElement("button", {
className: cn('mt-2 flex w-1/3 flex-col items-center rounded-md bg-gray-500 p-2 text-white transition-all duration-300 hover:bg-gray-600', classNames.cameraRotateButton),
onClick: handleCameraSwitch,
type: "button"
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CameraRotateIcon, null)), /*#__PURE__*/React.createElement("span", null, "switch to ", newCameraSide))), /*#__PURE__*/React.createElement(ShouldRender, {
if: !!url
}, /*#__PURE__*/React.createElement("button", {
className: cn('mt-2 w-full rounded-md bg-blue-600 p-2 text-white transition-all duration-300', {
'bg-[#59D1F9] dark:bg-[#59D1F9]': dark
}, classNames.cameraAddButton),
onClick: handleFetchImage,
type: "button"
}, "Add Image")))));
}
/**
* This hook loads the Google API and the Google Identity Services API
*
*/
function useLoadGAPI() {
const [gisLoaded, setGisLoaded] = useState(false);
useEffect(() => {
/**
* Load the Google Identity Services API
*/
load('https://accounts.google.com/gsi/client', async err => {
if (!err) setGisLoaded(true);
});
}, [gisLoaded]);
/**
* Return the gdriveApiLoaded and gisLoaded
*/
return {
gisLoaded
};
}
function useGoogleDrive(googleConfigs) {
if (googleConfigs === void 0) {
googleConfigs = {};
}
const {
google_client_id,
google_api_key
} = googleConfigs;
const {
props: {
onError
}
} = useRootContext();
const [user, setUser] = useState();
const [googleFiles, setGoogleFiles] = useState();
const [rawFiles, setRawFiles] = useState();
const [token, setToken] = useState();
const fetchDrive = useCallback(async url => {
return await fetch(url, {
method: 'GET',
headers: {
Authorization: `Bearer ${token == null ? void 0 : token.access_token}`
}
});
}, [token]);
const {
gisLoaded
} = useLoadGAPI();
/**
* @description Get the list of files from Google Drive
* @returns {Promise<void>}
*
*/
const getFilesList = useCallback(async () => {
const response = await fetchDrive(`https://www.googleapis.com/drive/v3/files?fields=files(fileExtension,id,mimeType,name,parents,size,thumbnailLink)&key=${google_api_key}`);
const data = await response.json();
if (data.error) {
onError(data.error);
return;
}
setRawFiles(data.files);
}, [fetchDrive, google_api_key, onError]);
/**
* @description Get the user's name from Google Drive
* @returns {Promise<void>}
*/
const getUserName = useCallback(async () => {
const response = await fetchDrive(`https://www.googleapis.com/oauth2/v3/userinfo`);
const data = await response.json();
setUser(data);
}, [fetchDrive]);
const handleSignOut = async () => {
// const google = await window.google
// google.accounts.id.revoke()
localStorage.removeItem('token');
setUser(undefined);
setGoogleFiles(undefined);
};
/**
* @description Organize the files into a tree structure
* @returns {void}
*/
const organizeFiles = useCallback(() => {
if (!rawFiles) return;
// Create a set for easy lookup of file IDs
const fileIds = new Set(rawFiles.map(f => f.id));
// Filter files to find ones that have no parents within rawFiles
const organizedFiles = rawFiles.filter(f => !(f.parents && fileIds.has(f.parents[0])));
// Create a mapping of parent IDs to their direct children
const parentIdToChildrenMap = {};
rawFiles.forEach(file => {
if (file.parents) {
file.parents.forEach(parentId => {
if (!parentIdToChildrenMap[parentId]) {
parentIdToChildrenMap[parentId] = [];
}
parentIdToChildrenMap[parentId].push(file);
});
}
});
/**
* @description Recursively add children to the tree structure
* @param {GoogleFile} file
* @returns {void}
*/
const recurse = file => {
const children = parentIdToChildrenMap[file.id];
if (children && children.length) {
file.children = children;
children.forEach(recurse); // recursive call for each child
}
};
// Assign children for each top-level file in organizedFiles and build the tree recursively
organizedFiles.forEach(recurse);
setGoogleFiles({
id: 'root-drive',
name: 'Drive',
children: organizedFiles
});
}, [rawFiles]);
useEffect(() => {
/**
* @description Initialize the Google Drive API
* @returns {Promise<void>}
*/
const storedTokenStr = localStorage.getItem('token');
const storedToken = storedTokenStr ? JSON.parse(storedTokenStr) : null;
if (storedToken && storedToken.expires_in > Date.now()) return setToken(storedToken);
if (gisLoaded) {
(async () => {
const google = await window.google;
google.accounts.oauth2.initTokenClient({
client_id: google_client_id,
scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/userinfo.profile',
ux_mode: 'popup',
callback(tokenResponse) {
if (!(tokenResponse != null && tokenResponse.error)) {
localStorage.setItem('token', JSON.stringify({
...tokenResponse,
expires_in: Date.now() + (tokenResponse.expires_in - 20) * 1000
}));
return setToken(tokenResponse);
} else {
onError('Error: ' + (tokenResponse == null ? void 0 : tokenResponse.error));
}
}
}).requestAccessToken({});
})();
}
}, [gisLoaded, google_client_id, onError]);
/**
* @description Get the user's name and files list when the token is set
*/
useEffect(() => {
if (token) {
(async () => {
await getUserName();
await getFilesList();
})();
}
}, [getFilesList, getUserName, token]);
/**
* @description