@xplor-education/core-stencil-components 3.2.4 → 3.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/components/{p-Do6FGVWp.js → p-DLWjo-xX.js} +3 -3
  2. package/components/p-DLWjo-xX.js.map +1 -0
  3. package/components/xplor-drag-and-drop-input.js +1 -1
  4. package/components/xplor-drag-and-drop-input.js.map +1 -1
  5. package/components/xplor-modal-persistent.js +1 -1
  6. package/components/xplor-modal.js +1 -1
  7. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +2 -2
  8. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +6 -4
  10. package/dist/collection/components/xplor-modal/xplor-modal.css +2 -1
  11. package/dist/components/{p-BDvok8fS.js → p-DuSQhGb3.js} +3 -3
  12. package/dist/components/p-DuSQhGb3.js.map +1 -0
  13. package/dist/components/xplor-drag-and-drop-input.js +1 -1
  14. package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
  15. package/dist/components/xplor-modal-persistent.js +1 -1
  16. package/dist/components/xplor-modal.js +1 -1
  17. package/dist/esm/xplor-alert-dialog_60.entry.js +2 -2
  18. package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -1
  19. package/dist/hydrate/index.js +2 -2
  20. package/dist/hydrate/index.mjs +2 -2
  21. package/dist/xplor-component-library/p-a4365859.entry.js +2 -0
  22. package/dist/xplor-component-library/p-a4365859.entry.js.map +1 -0
  23. package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
  24. package/package.json +1 -1
  25. package/components/p-Do6FGVWp.js.map +0 -1
  26. package/dist/components/p-BDvok8fS.js.map +0 -1
  27. package/dist/xplor-component-library/p-8454512e.entry.js +0 -2
  28. package/dist/xplor-component-library/p-8454512e.entry.js.map +0 -1
package/components/{p-Do6FGVWp.js → p-DLWjo-xX.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
2
 
3
- const xplorModalCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-modal {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-modal {\n width: 600px !important;\n }\n}\nh1.sc-xplor-modal {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-modal, ul.sc-xplor-modal {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-modal li.sc-xplor-modal, ul.sc-xplor-modal li.sc-xplor-modal {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-modal, ul.mdc-list.sc-xplor-modal {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal, ul.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-modal {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-modal {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-modal {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-modal .mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-modal {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-modal:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-modal {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-modal-h {\n display: contents;\n}\n\n.xplor-modal__backdrop.sc-xplor-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n padding: 1rem;\n}\n.xplor-modal__card.sc-xplor-modal {\n position: relative;\n background-color: white;\n border-radius: 1rem;\n padding: 2rem 2.25rem;\n max-width: 90vw;\n display: flex;\n flex-direction: column;\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n animation: xplor-modal-fade-in 0.2s ease-out;\n}\n.xplor-modal__card--scrollable.sc-xplor-modal {\n overflow: hidden;\n}\n.xplor-modal__close-btn.sc-xplor-modal {\n position: absolute;\n top: 2rem;\n right: 2.25rem;\n width: 3rem;\n height: 3rem;\n border: none;\n background-color: #DFF2F1;\n color: #008480;\n font-size: 1rem;\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n z-index: 1;\n}\n.xplor-modal__close-btn.sc-xplor-modal:hover {\n background-color: #C5E8E6;\n}\n.xplor-modal__close-btn.sc-xplor-modal:active {\n background-color: #B0DFDD;\n}\n.xplor-modal__title.sc-xplor-modal {\n padding-right: 3.5rem;\n margin-bottom: 0.5rem;\n font-size: 1.5rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.87);\n white-space: normal;\n word-wrap: break-word;\n}\n.xplor-modal__subtitle.sc-xplor-modal {\n margin: 0.5rem;\n margin-bottom: 1rem;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-modal__body.sc-xplor-modal {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 1rem;\n}\n.xplor-modal__body--no-title.sc-xplor-modal {\n margin-top: 3.5rem;\n}\n.xplor-modal__actions.sc-xplor-modal {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin: 1rem 0;\n}\n.xplor-modal__loading.sc-xplor-modal {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n}\n.xplor-modal__spinner.sc-xplor-modal {\n width: 3rem;\n height: 3rem;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top-color: #008480;\n border-radius: 50%;\n animation: xplor-spinner-rotate 0.8s linear infinite;\n}\n\n@keyframes xplor-modal-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes xplor-spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
3
+ const xplorModalCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-modal {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-modal {\n width: 600px !important;\n }\n}\nh1.sc-xplor-modal {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-modal, ul.sc-xplor-modal {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-modal li.sc-xplor-modal, ul.sc-xplor-modal li.sc-xplor-modal {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-modal, ul.mdc-list.sc-xplor-modal {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal, ul.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-modal {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-modal {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-modal {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-modal .mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-modal {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-modal:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-modal {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-modal-h {\n display: contents;\n}\n\n.xplor-modal__backdrop.sc-xplor-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n padding: 1rem;\n}\n.xplor-modal__card.sc-xplor-modal {\n position: relative;\n background-color: white;\n border-radius: 1rem;\n padding: 2rem 2.25rem;\n max-width: 90vw;\n display: flex;\n flex-direction: column;\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n animation: xplor-modal-fade-in 0.2s ease-out;\n}\n.xplor-modal__card--scrollable.sc-xplor-modal {\n overflow: hidden;\n}\n.xplor-modal__close-btn.sc-xplor-modal {\n position: absolute;\n top: 2rem;\n right: 2.25rem;\n width: 3rem;\n height: 3rem;\n border: none;\n background-color: #DFF2F1;\n color: #008480;\n font-size: 1rem;\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n z-index: 1;\n}\n.xplor-modal__close-btn.sc-xplor-modal:hover {\n background-color: #C5E8E6;\n}\n.xplor-modal__close-btn.sc-xplor-modal:active {\n background-color: #B0DFDD;\n}\n.xplor-modal__title.sc-xplor-modal {\n padding-right: 3.5rem;\n margin-bottom: 0.5rem;\n font-size: 1.5rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.87);\n white-space: normal;\n word-wrap: break-word;\n}\n.xplor-modal__subtitle.sc-xplor-modal {\n margin: 0.5rem;\n margin-bottom: 1rem;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-modal__body.sc-xplor-modal {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 1rem;\n}\n.xplor-modal__body--no-title.sc-xplor-modal {\n margin-top: 3.5rem;\n}\n.xplor-modal__actions.sc-xplor-modal {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n}\n.xplor-modal__loading.sc-xplor-modal {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n}\n.xplor-modal__spinner.sc-xplor-modal {\n width: 3rem;\n height: 3rem;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top-color: #008480;\n border-radius: 50%;\n animation: xplor-spinner-rotate 0.8s linear infinite;\n}\n\n@keyframes xplor-modal-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes xplor-spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
4
4
 
5
5
  const XplorModal = /*@__PURE__*/ proxyCustomElement(class XplorModal extends H {
6
6
  constructor() {
@@ -172,6 +172,6 @@ function defineCustomElement() {
172
172
  }
173
173
 
174
174
  export { XplorModal as X, defineCustomElement as d };
175
- //# sourceMappingURL=p-Do6FGVWp.js.map
175
+ //# sourceMappingURL=p-DLWjo-xX.js.map
176
176
 
177
- //# sourceMappingURL=p-Do6FGVWp.js.map
177
+ //# sourceMappingURL=p-DLWjo-xX.js.map
package/components/p-DLWjo-xX.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-DLWjo-xX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-modal/xplor-modal.scss?tag=xplor-modal&encapsulation=scoped","src/components/xplor-modal/xplor-modal.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n.xplor-modal {\n &__backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n padding: 1rem;\n }\n\n &__card {\n position: relative;\n background-color: white;\n border-radius: 1rem;\n padding: 2rem 2.25rem;\n max-width: 90vw;\n display: flex;\n flex-direction: column;\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),\n 0px 24px 38px 3px rgba(0, 0, 0, 0.14),\n 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n animation: xplor-modal-fade-in 0.2s ease-out;\n\n &--scrollable {\n overflow: hidden;\n }\n }\n\n &__close-btn {\n position: absolute;\n top: 2rem;\n right: 2.25rem;\n width: 3rem;\n height: 3rem;\n border: none;\n background-color: #DFF2F1;\n color: #008480;\n font-size: 1rem;\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n z-index: 1;\n\n &:hover {\n background-color: #C5E8E6;\n }\n\n &:active {\n background-color: #B0DFDD;\n }\n }\n\n &__title {\n padding-right: 3.5rem;\n margin-bottom: 0.5rem;\n font-size: 1.5rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.87);\n white-space: normal;\n word-wrap: break-word;\n }\n\n &__subtitle {\n margin: 0.5rem;\n margin-bottom: 1rem;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n }\n\n &__body {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 1rem;\n\n &--no-title {\n margin-top: 3.5rem;\n }\n }\n\n &__actions {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n }\n\n &__loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n }\n\n &__spinner {\n width: 3rem;\n height: 3rem;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top-color: #008480;\n border-radius: 50%;\n animation: xplor-spinner-rotate 0.8s linear infinite;\n }\n}\n\n@keyframes xplor-modal-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes xplor-spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'xplor-modal',\n styleUrl: 'xplor-modal.scss',\n scoped: true,\n})\nexport class XplorModal {\n /**\n * Whether the modal is open\n */\n @Prop({ mutable: true }) open: boolean = false;\n\n /**\n * Modal width\n */\n @Prop() width: string = '600px';\n\n /**\n * Maximum width\n */\n @Prop() maxWidth: string = '90%';\n\n /**\n * Maximum height\n */\n @Prop() maxHeight: string = '90%';\n\n /**\n * Whether the modal content is scrollable\n */\n @Prop() scrollable: boolean = true;\n\n /**\n * Persistent mode - prevents closing on backdrop click\n */\n @Prop() persistent: boolean = false;\n\n /**\n * Loading state\n */\n @Prop() loading: boolean = false;\n\n /**\n * Whether to show the title area (for spacing)\n */\n @Prop() showTitle: boolean = true;\n\n /**\n * Accessible label for the modal (used if no title slot)\n */\n @Prop() ariaLabel: string;\n\n /**\n * Close event\n */\n @Event() xplorClose: EventEmitter<void>;\n\n @Element() el: HTMLElement;\n\n private previouslyFocusedElement: HTMLElement | null = null;\n private dialogEl: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n document.body.style.overflow = 'hidden';\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n requestAnimationFrame(() => {\n this.setInitialFocus();\n });\n } else {\n document.body.style.overflow = '';\n if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus();\n this.previouslyFocusedElement = null;\n }\n }\n }\n\n disconnectedCallback() {\n document.body.style.overflow = '';\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.open) return;\n\n if (event.key === 'Escape' && !this.persistent) {\n event.preventDefault();\n this.closeModal();\n return;\n }\n\n if (event.key === 'Tab') {\n this.trapFocus(event);\n }\n }\n\n private getFocusableElements(): HTMLElement[] {\n if (!this.dialogEl) return [];\n const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(this.dialogEl.querySelectorAll(selectors)) as HTMLElement[];\n }\n\n private trapFocus(event: KeyboardEvent) {\n const focusableElements = this.getFocusableElements();\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else {\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n }\n\n private setInitialFocus() {\n const focusableElements = this.getFocusableElements();\n if (focusableElements.length > 0) {\n focusableElements[0].focus();\n } else if (this.dialogEl) {\n this.dialogEl.focus();\n }\n }\n\n private handleBackdropClick = () => {\n if (!this.persistent) {\n this.closeModal();\n }\n };\n\n private handleCardClick = (event: Event) => {\n event.stopPropagation();\n };\n\n private closeModal = () => {\n this.open = false;\n this.xplorClose.emit();\n };\n\n render() {\n if (!this.open) {\n return null;\n }\n\n const cardClasses = {\n 'xplor-modal__card': true,\n 'xplor-modal__card--scrollable': this.scrollable,\n };\n\n const bodyClasses = {\n 'xplor-modal__body': true,\n 'xplor-modal__body--no-title': !this.showTitle,\n };\n\n return (\n <Host>\n <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n <div\n class={cardClasses}\n style={{\n width: this.width,\n maxWidth: this.maxWidth,\n maxHeight: this.maxHeight,\n }}\n onClick={this.handleCardClick}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={this.ariaLabel ? undefined : 'xplor-modal-title'}\n aria-label={this.ariaLabel}\n tabindex=\"-1\"\n ref={(el) => (this.dialogEl = el)}\n >\n <button\n type=\"button\"\n class=\"xplor-modal__close-btn\"\n onClick={this.closeModal}\n aria-label=\"Close modal\"\n data-testid=\"common-modal-close-button\"\n >\n ✕\n </button>\n\n <div class=\"xplor-modal__title\" id=\"xplor-modal-title\">\n <slot name=\"title\" />\n </div>\n\n <div class=\"xplor-modal__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n\n <div class={bodyClasses}>\n {this.loading ? (\n <div class=\"xplor-modal__loading\" role=\"status\" aria-label=\"Loading\">\n <div class=\"xplor-modal__spinner\"></div>\n </div>\n ) : ([\n <slot name=\"body\" />,\n <slot />\n ])}\n </div>\n\n <div class=\"xplor-modal__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/components/xplor-drag-and-drop-input.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
2
  import { d as defineCustomElement$2 } from './p-DiaNPkGZ.js';
3
3
 
4
- const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n position: relative;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: #DFF2F1;\n border-radius: 16px;\n border: 2px dashed var(--color-primary-50, #e3f2fd);\n min-height: 300px;\n padding: 3rem 2rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 2px dashed var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__body.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__text.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n}\n\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 210px;\n padding: 73px 173px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__content.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__body.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__text.sc-xplor-drag-and-drop-input {\n text-align: left;\n max-width: 339px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #616161;\n margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background-color: #ffffff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: var(--color-secondary-50, #f3e5f5);\n color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: #000000;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: var(--color-secondary);\n margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n flex: 1;\n height: 6px;\n background-color: #eeeeee;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n height: 100%;\n background-color: var(--color-secondary);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: #757575;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: #eeeeee;\n color: #757575;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n background-color: #e0e0e0;\n color: #424242;\n}";
4
+ const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n position: relative;\n border: none;\n outline: none;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: #DFF2F1;\n border-radius: 16px;\n border: 2px dashed var(--color-primary-50, #e3f2fd);\n min-height: 300px;\n padding: 3rem 2rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 2px dashed var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__body.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__text.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n}\n\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 210px;\n padding: 73px 173px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__content.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__body.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__text.sc-xplor-drag-and-drop-input {\n text-align: left;\n max-width: 339px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #616161;\n margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background-color: #ffffff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: var(--color-primary-50, #e3f2fd);\n color: var(--color-primary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: #000000;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: var(--color-primary);\n margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n flex: 1;\n height: 6px;\n background-color: #eeeeee;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n height: 100%;\n background-color: var(--color-primary);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: #757575;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: #eeeeee;\n color: #757575;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n background-color: #e0e0e0;\n color: #424242;\n}";
5
5
 
6
6
  const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
7
7
  const HORIZONTAL_BREAKPOINT = 700;
package/components/xplor-drag-and-drop-input.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"xplor-drag-and-drop-input.js","mappings":"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","names":["XplorDragAndDropInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.scss?tag=xplor-drag-and-drop-input&encapsulation=scoped","src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.drag-drop-zone {\n position: relative;\n}\n\n.drag-drop-input-hidden {\n display: none;\n}\n\n// --------------------------------------------------\n// Card (drop zone)\n// --------------------------------------------------\n.drag-drop-card {\n background-color: colours.$bg-light;\n border-radius: 16px;\n border: 2px dashed colours.$primary-50;\n min-height: 300px;\n padding: spacing.$spacing-48 spacing.$spacing-32;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n\n &:hover:not(&--disabled) {\n border-color: colours.$primary;\n background-color: colours.$success-100;\n }\n\n &--dragover {\n border: 2px dashed colours.$primary;\n background-color: colours.$success-100;\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n\n// --------------------------------------------------\n// Content – default vertical layout (mobile / narrow)\n// --------------------------------------------------\n.drag-drop-card__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.$spacing-8;\n}\n\n.drag-drop-card__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.$spacing-8;\n}\n\n.drag-drop-card__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon {\n color: colours.$primary;\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action {\n flex-shrink: 0;\n}\n\n// --------------------------------------------------\n// Horizontal layout – wide containers (≥ 700px)\n// --------------------------------------------------\n.drag-drop-zone--horizontal {\n .drag-drop-card {\n min-height: 210px;\n padding: 73px 173px;\n }\n\n .drag-drop-card__content {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: spacing.$spacing-16;\n }\n\n .drag-drop-card__body {\n flex-direction: row;\n align-items: flex-start;\n gap: spacing.$spacing-8;\n }\n\n .drag-drop-card__text {\n text-align: left;\n max-width: 339px;\n }\n\n .drag-drop-card__title {\n text-align: left;\n }\n\n .drag-drop-card__accepts {\n text-align: left;\n }\n}\n\n// --------------------------------------------------\n// File info section (shown after file is selected)\n// --------------------------------------------------\n.file-info {\n margin-top: spacing.$spacing-24;\n}\n\n.file-info__status {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: colours.$gray-700;\n margin: 0 0 spacing.$spacing-8 0;\n}\n\n.file-info__card {\n display: flex;\n align-items: flex-start;\n gap: spacing.$spacing-12;\n background-color: colours.$white;\n border: 1px solid colours.$gray-300;\n border-radius: 8px;\n padding: spacing.$spacing-12 spacing.$spacing-16;\n}\n\n.file-info__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: colours.$secondary-50;\n color: colours.$secondary;\n}\n\n.file-info__details {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: colours.$black;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: colours.$secondary;\n margin: spacing.$spacing-4 0 0 0;\n}\n\n.file-info__progress-row {\n display: flex;\n align-items: center;\n gap: spacing.$spacing-8;\n margin-top: spacing.$spacing-8;\n}\n\n.file-info__progress-bar {\n flex: 1;\n height: 6px;\n background-color: colours.$gray-200;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill {\n height: 100%;\n background-color: colours.$secondary;\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: colours.$gray-600;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: colours.$gray-200;\n color: colours.$gray-600;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: colours.$gray-300;\n color: colours.$gray-800;\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\nconst HORIZONTAL_BREAKPOINT = 700;\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel: string | null = null;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n @State() horizontal: boolean = false;\n\n @Element() el!: HTMLElement;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect!: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear!: EventEmitter<void>;\n\n private fileInputEl?: HTMLInputElement;\n private resizeObserver?: ResizeObserver;\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;\n }\n });\n }\n\n componentDidLoad() {\n const zone = this.el.querySelector('.drag-drop-zone');\n if (zone && this.resizeObserver) {\n this.resizeObserver.observe(zone);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts\n .split(',')\n .map((token) => token.trim())\n .filter((token) => token.length > 0)\n .map((token) => {\n if (token.startsWith('image/')) {\n return token.slice(6).toUpperCase();\n }\n\n if (token.startsWith('.')) {\n return token.slice(1).toUpperCase();\n }\n\n return token.toUpperCase();\n })\n .join('/');\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class={{ 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal }}>\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <div class=\"drag-drop-card__body\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"drag-drop-card__text\">\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n )}\n </div>\n </div>\n <p class=\"drag-drop-card__divider\">or</p>\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'primary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"xplor-drag-and-drop-input.js","mappings":"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","names":["XplorDragAndDropInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.scss?tag=xplor-drag-and-drop-input&encapsulation=scoped","src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.drag-drop-zone {\n position: relative;\n border: none;\n outline: none;\n}\n\n.drag-drop-input-hidden {\n display: none;\n}\n\n// --------------------------------------------------\n// Card (drop zone)\n// --------------------------------------------------\n.drag-drop-card {\n background-color: colours.$bg-light;\n border-radius: 16px;\n border: 2px dashed colours.$primary-50;\n min-height: 300px;\n padding: spacing.$spacing-48 spacing.$spacing-32;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n\n &:hover:not(&--disabled) {\n border-color: colours.$primary;\n background-color: colours.$success-100;\n }\n\n &--dragover {\n border: 2px dashed colours.$primary;\n background-color: colours.$success-100;\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n\n// --------------------------------------------------\n// Content – default vertical layout (mobile / narrow)\n// --------------------------------------------------\n.drag-drop-card__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.$spacing-8;\n}\n\n.drag-drop-card__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.$spacing-8;\n}\n\n.drag-drop-card__text {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon {\n color: colours.$primary;\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action {\n flex-shrink: 0;\n}\n\n// --------------------------------------------------\n// Horizontal layout – wide containers (≥ 700px)\n// --------------------------------------------------\n.drag-drop-zone--horizontal {\n .drag-drop-card {\n min-height: 210px;\n padding: 73px 173px;\n }\n\n .drag-drop-card__content {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: spacing.$spacing-16;\n }\n\n .drag-drop-card__body {\n flex-direction: row;\n align-items: flex-start;\n gap: spacing.$spacing-8;\n }\n\n .drag-drop-card__text {\n text-align: left;\n max-width: 339px;\n }\n\n .drag-drop-card__title {\n text-align: left;\n }\n\n .drag-drop-card__accepts {\n text-align: left;\n }\n}\n\n// --------------------------------------------------\n// File info section (shown after file is selected)\n// --------------------------------------------------\n.file-info {\n margin-top: spacing.$spacing-24;\n}\n\n.file-info__status {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: colours.$gray-700;\n margin: 0 0 spacing.$spacing-8 0;\n}\n\n.file-info__card {\n display: flex;\n align-items: flex-start;\n gap: spacing.$spacing-12;\n background-color: colours.$white;\n border: 1px solid colours.$gray-300;\n border-radius: 8px;\n padding: spacing.$spacing-12 spacing.$spacing-16;\n}\n\n.file-info__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: colours.$primary-50;\n color: colours.$primary;\n}\n\n.file-info__details {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: colours.$black;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: colours.$primary;\n margin: spacing.$spacing-4 0 0 0;\n}\n\n.file-info__progress-row {\n display: flex;\n align-items: center;\n gap: spacing.$spacing-8;\n margin-top: spacing.$spacing-8;\n}\n\n.file-info__progress-bar {\n flex: 1;\n height: 6px;\n background-color: colours.$gray-200;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill {\n height: 100%;\n background-color: colours.$primary;\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: colours.$gray-600;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: colours.$gray-200;\n color: colours.$gray-600;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: colours.$gray-300;\n color: colours.$gray-800;\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\nconst HORIZONTAL_BREAKPOINT = 700;\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel: string | null = null;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n @State() horizontal: boolean = false;\n\n @Element() el!: HTMLElement;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect!: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear!: EventEmitter<void>;\n\n private fileInputEl?: HTMLInputElement;\n private resizeObserver?: ResizeObserver;\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;\n }\n });\n }\n\n componentDidLoad() {\n const zone = this.el.querySelector('.drag-drop-zone');\n if (zone && this.resizeObserver) {\n this.resizeObserver.observe(zone);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts\n .split(',')\n .map((token) => token.trim())\n .filter((token) => token.length > 0)\n .map((token) => {\n if (token.startsWith('image/')) {\n return token.slice(6).toUpperCase();\n }\n\n if (token.startsWith('.')) {\n return token.slice(1).toUpperCase();\n }\n\n return token.toUpperCase();\n })\n .join('/');\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class={{ 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal }}>\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <div class=\"drag-drop-card__body\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"drag-drop-card__text\">\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n )}\n </div>\n </div>\n <p class=\"drag-drop-card__divider\">or</p>\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'primary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"],"version":3}
package/components/xplor-modal-persistent.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Do6FGVWp.js';
2
+ import { d as defineCustomElement$2 } from './p-DLWjo-xX.js';
3
3
 
4
4
  const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModalPersistent extends H {
5
5
  constructor() {
package/components/xplor-modal.js CHANGED
@@ -1,4 +1,4 @@
1
- import { X as XplorModal$1, d as defineCustomElement$1 } from './p-Do6FGVWp.js';
1
+ import { X as XplorModal$1, d as defineCustomElement$1 } from './p-DLWjo-xX.js';
2
2
 
3
3
  const XplorModal = XplorModal$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js CHANGED
@@ -2981,7 +2981,7 @@ const XplorDatePicker = class {
2981
2981
  };
2982
2982
  XplorDatePicker.style = xplorDatePickerCss;
2983
2983
 
2984
- const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n position: relative;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: #DFF2F1;\n border-radius: 16px;\n border: 2px dashed var(--color-primary-50, #e3f2fd);\n min-height: 300px;\n padding: 3rem 2rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 2px dashed var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__body.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__text.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n}\n\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 210px;\n padding: 73px 173px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__content.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__body.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__text.sc-xplor-drag-and-drop-input {\n text-align: left;\n max-width: 339px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #616161;\n margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background-color: #ffffff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: var(--color-secondary-50, #f3e5f5);\n color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: #000000;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: var(--color-secondary);\n margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n flex: 1;\n height: 6px;\n background-color: #eeeeee;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n height: 100%;\n background-color: var(--color-secondary);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: #757575;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: #eeeeee;\n color: #757575;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n background-color: #e0e0e0;\n color: #424242;\n}";
2984
+ const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n position: relative;\n border: none;\n outline: none;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: #DFF2F1;\n border-radius: 16px;\n border: 2px dashed var(--color-primary-50, #e3f2fd);\n min-height: 300px;\n padding: 3rem 2rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 2px dashed var(--color-primary);\n background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__body.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n\n.drag-drop-card__text.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 23px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n}\n\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 210px;\n padding: 73px 173px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__content.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__body.sc-xplor-drag-and-drop-input {\n flex-direction: row;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__text.sc-xplor-drag-and-drop-input {\n text-align: left;\n max-width: 339px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n text-align: left;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #616161;\n margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background-color: #ffffff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: var(--color-primary-50, #e3f2fd);\n color: var(--color-primary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: #000000;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: var(--color-primary);\n margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n flex: 1;\n height: 6px;\n background-color: #eeeeee;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n height: 100%;\n background-color: var(--color-primary);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: #757575;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: #eeeeee;\n color: #757575;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n background-color: #e0e0e0;\n color: #424242;\n}";
2985
2985
 
2986
2986
  const DEFAULT_ACCEPT_ALL$1 = '*' + '/' + '*';
2987
2987
  const HORIZONTAL_BREAKPOINT = 700;
@@ -4468,7 +4468,7 @@ const XplorLinks = class {
4468
4468
  };
4469
4469
  XplorLinks.style = xplorLinksCss;
4470
4470
 
4471
- const xplorModalCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-modal {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-modal {\n width: 600px !important;\n }\n}\nh1.sc-xplor-modal {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-modal, ul.sc-xplor-modal {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-modal li.sc-xplor-modal, ul.sc-xplor-modal li.sc-xplor-modal {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-modal, ul.mdc-list.sc-xplor-modal {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal, ul.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-modal {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-modal {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-modal {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-modal .mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-modal {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-modal:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-modal {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-modal-h {\n display: contents;\n}\n\n.xplor-modal__backdrop.sc-xplor-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n padding: 1rem;\n}\n.xplor-modal__card.sc-xplor-modal {\n position: relative;\n background-color: white;\n border-radius: 1rem;\n padding: 2rem 2.25rem;\n max-width: 90vw;\n display: flex;\n flex-direction: column;\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n animation: xplor-modal-fade-in 0.2s ease-out;\n}\n.xplor-modal__card--scrollable.sc-xplor-modal {\n overflow: hidden;\n}\n.xplor-modal__close-btn.sc-xplor-modal {\n position: absolute;\n top: 2rem;\n right: 2.25rem;\n width: 3rem;\n height: 3rem;\n border: none;\n background-color: #DFF2F1;\n color: #008480;\n font-size: 1rem;\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n z-index: 1;\n}\n.xplor-modal__close-btn.sc-xplor-modal:hover {\n background-color: #C5E8E6;\n}\n.xplor-modal__close-btn.sc-xplor-modal:active {\n background-color: #B0DFDD;\n}\n.xplor-modal__title.sc-xplor-modal {\n padding-right: 3.5rem;\n margin-bottom: 0.5rem;\n font-size: 1.5rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.87);\n white-space: normal;\n word-wrap: break-word;\n}\n.xplor-modal__subtitle.sc-xplor-modal {\n margin: 0.5rem;\n margin-bottom: 1rem;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-modal__body.sc-xplor-modal {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 1rem;\n}\n.xplor-modal__body--no-title.sc-xplor-modal {\n margin-top: 3.5rem;\n}\n.xplor-modal__actions.sc-xplor-modal {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin: 1rem 0;\n}\n.xplor-modal__loading.sc-xplor-modal {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n}\n.xplor-modal__spinner.sc-xplor-modal {\n width: 3rem;\n height: 3rem;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top-color: #008480;\n border-radius: 50%;\n animation: xplor-spinner-rotate 0.8s linear infinite;\n}\n\n@keyframes xplor-modal-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes xplor-spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
4471
+ const xplorModalCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-modal {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-modal {\n width: 600px !important;\n }\n}\nh1.sc-xplor-modal {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-modal {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-modal, ul.sc-xplor-modal {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-modal li.sc-xplor-modal, ul.sc-xplor-modal li.sc-xplor-modal {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-modal, ul.mdc-list.sc-xplor-modal {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal, ul.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-modal {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-modal {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-modal {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-modal .mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-modal {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-modal:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-modal {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-modal-h {\n display: contents;\n}\n\n.xplor-modal__backdrop.sc-xplor-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2000;\n padding: 1rem;\n}\n.xplor-modal__card.sc-xplor-modal {\n position: relative;\n background-color: white;\n border-radius: 1rem;\n padding: 2rem 2.25rem;\n max-width: 90vw;\n display: flex;\n flex-direction: column;\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n animation: xplor-modal-fade-in 0.2s ease-out;\n}\n.xplor-modal__card--scrollable.sc-xplor-modal {\n overflow: hidden;\n}\n.xplor-modal__close-btn.sc-xplor-modal {\n position: absolute;\n top: 2rem;\n right: 2.25rem;\n width: 3rem;\n height: 3rem;\n border: none;\n background-color: #DFF2F1;\n color: #008480;\n font-size: 1rem;\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n z-index: 1;\n}\n.xplor-modal__close-btn.sc-xplor-modal:hover {\n background-color: #C5E8E6;\n}\n.xplor-modal__close-btn.sc-xplor-modal:active {\n background-color: #B0DFDD;\n}\n.xplor-modal__title.sc-xplor-modal {\n padding-right: 3.5rem;\n margin-bottom: 0.5rem;\n font-size: 1.5rem;\n font-weight: 500;\n color: rgba(0, 0, 0, 0.87);\n white-space: normal;\n word-wrap: break-word;\n}\n.xplor-modal__subtitle.sc-xplor-modal {\n margin: 0.5rem;\n margin-bottom: 1rem;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-modal__body.sc-xplor-modal {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 1rem;\n}\n.xplor-modal__body--no-title.sc-xplor-modal {\n margin-top: 3.5rem;\n}\n.xplor-modal__actions.sc-xplor-modal {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n}\n.xplor-modal__loading.sc-xplor-modal {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3rem;\n}\n.xplor-modal__spinner.sc-xplor-modal {\n width: 3rem;\n height: 3rem;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top-color: #008480;\n border-radius: 50%;\n animation: xplor-spinner-rotate 0.8s linear infinite;\n}\n\n@keyframes xplor-modal-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes xplor-spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
4472
4472
 
4473
4473
  const XplorModal = class {
4474
4474
  constructor(hostRef) {