@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-date-picker.js

@@ -0,0 +1,269 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-BIFlTsO8.js';
+
+const xplorDatePickerCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\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-date-picker {\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-date-picker {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-date-picker {\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-date-picker {\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-date-picker {\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-date-picker {\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-date-picker, ul.sc-xplor-date-picker {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-date-picker li.sc-xplor-date-picker, ul.sc-xplor-date-picker li.sc-xplor-date-picker {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-date-picker {\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-date-picker {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-date-picker {\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-date-picker {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-date-picker .mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\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-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-date-picker {\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-date-picker:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-date-picker {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-date-picker-h {\n  display: block;\n  width: 100%;\n}\n\n.date-picker.sc-xplor-date-picker {\n  position: relative;\n  width: 100%;\n}\n.date-picker--disabled.sc-xplor-date-picker {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.date-picker__label.sc-xplor-date-picker {\n  display: block;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.date-picker__required.sc-xplor-date-picker {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.date-picker__field.sc-xplor-date-picker {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  transition: border-color 0.2s ease;\n  background: white;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within .date-picker__input.sc-xplor-date-picker {\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.date-picker--error.sc-xplor-date-picker .date-picker__field.sc-xplor-date-picker {\n  border-color: #d32f2f;\n}\n.date-picker__input.sc-xplor-date-picker {\n  flex: 1;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  border-radius: 1rem;\n  outline: none;\n  background: transparent;\n}\n.date-picker__input.sc-xplor-date-picker::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.date-picker__input.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n}\n.date-picker__actions.sc-xplor-date-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding-right: 0.5rem;\n  flex-shrink: 0;\n}\n.date-picker__clear.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__clear.sc-xplor-date-picker:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.date-picker__icon-svg.sc-xplor-date-picker {\n  display: block;\n}\n.date-picker__text-display.sc-xplor-date-picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 4px;\n  color: #008480;\n  font-size: 1rem;\n  transition: background-color 0.2s;\n}\n.date-picker__text-display.sc-xplor-date-picker:hover {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.date-picker__text-value.sc-xplor-date-picker {\n  text-decoration: underline;\n}\n.date-picker__dropdown.sc-xplor-date-picker {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 1000;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.date-picker__dropdown--top.sc-xplor-date-picker {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.date-picker__details.sc-xplor-date-picker {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.date-picker__error-message.sc-xplor-date-picker {\n  color: #d32f2f;\n}";
+
+const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dateChange = createEvent(this, "dateChange");
+        this.xplorFocus = createEvent(this, "xplorFocus");
+        this.xplorBlur = createEvent(this, "xplorBlur");
+        this.xplorClear = createEvent(this, "xplorClear");
+        /** Selected date in YYYY-MM-DD format */
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select date';
+        /** 'date' or 'month' */
+        this.type = 'date';
+        /** For month type: select start or end of month */
+        this.monthType = 'start';
+        /** 'input' shows text input, 'text' shows clickable text */
+        this.display = 'input';
+        /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */
+        this.dateFormat = 'short';
+        this.min = '';
+        this.max = '';
+        this.readonly = false;
+        this.disabled = false;
+        this.clearable = false;
+        this.closeOnSelect = true;
+        this.bgColor = 'white';
+        this.color = '#008480';
+        this.startWeekOnSunday = true;
+        this.error = '';
+        this.hideDetails = 'auto';
+        this.required = false;
+        this.isOpen = false;
+        this.inputText = '';
+        this.dropdownPosition = 'bottom';
+        this.toggleDropdown = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.updateDropdownPosition();
+            this.isOpen = !this.isOpen;
+        };
+        this.handleInputFocus = (event) => {
+            this.xplorFocus.emit(event);
+        };
+        this.handleInputBlur = (event) => {
+            this.xplorBlur.emit(event);
+            // Try to parse typed text
+            const parsed = this.parseInputText(this.inputText);
+            if (parsed && this.isDateInRange(parsed)) {
+                this.value = parsed;
+                this.inputText = this.formatDateForDisplay(parsed);
+                this.dateChange.emit(parsed);
+            }
+            else if (this.value) {
+                // Revert to current value display
+                this.inputText = this.formatDateForDisplay(this.value);
+            }
+            else {
+                this.inputText = '';
+            }
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputText = input.value;
+        };
+        this.handleDateSelected = (event) => {
+            event.stopPropagation();
+            const iso = event.detail;
+            if (!this.isDateInRange(iso))
+                return;
+            if (this.type === 'month') {
+                const d = this.parseISODate(iso);
+                if (d) {
+                    let finalDate;
+                    if (this.monthType === 'end') {
+                        finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+                    }
+                    else {
+                        finalDate = new Date(d.getFullYear(), d.getMonth(), 1);
+                    }
+                    const finalIso = this.toISO(finalDate);
+                    this.value = finalIso;
+                    this.inputText = this.formatDateForDisplay(finalIso);
+                    this.dateChange.emit(finalIso);
+                }
+            }
+            else {
+                this.value = iso;
+                this.inputText = this.formatDateForDisplay(iso);
+                this.dateChange.emit(iso);
+            }
+            if (this.closeOnSelect) {
+                this.isOpen = false;
+            }
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.value = '';
+            this.inputText = '';
+            this.dateChange.emit('');
+            this.xplorClear.emit();
+        };
+        this.handleTextClick = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.updateDropdownPosition();
+            this.isOpen = !this.isOpen;
+        };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.inputText = this.formatDateForDisplay(this.value);
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    /** Parse YYYY-MM-DD safely without UTC shift */
+    parseISODate(iso) {
+        if (!iso)
+            return null;
+        const d = new Date(iso + 'T00:00:00');
+        return isNaN(d.getTime()) ? null : d;
+    }
+    formatDateForDisplay(iso) {
+        const date = this.parseISODate(iso);
+        if (!date)
+            return iso;
+        if (this.type === 'month') {
+            return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);
+        }
+        switch (this.dateFormat) {
+            case 'long':
+                return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+            case 'iso':
+                return iso;
+            case 'short':
+            default:
+                return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
+        }
+    }
+    toISO(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    /** Parse user-typed text into YYYY-MM-DD */
+    parseInputText(text) {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return null;
+        // Try DD/MM/YYYY
+        const slashMatch = trimmed.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
+        if (slashMatch) {
+            const day = parseInt(slashMatch[1], 10);
+            const month = parseInt(slashMatch[2], 10);
+            const year = parseInt(slashMatch[3], 10);
+            const d = new Date(year, month - 1, day);
+            if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+                return this.toISO(d);
+            }
+        }
+        // Try YYYY-MM-DD
+        const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+        if (isoMatch) {
+            const year = parseInt(isoMatch[1], 10);
+            const month = parseInt(isoMatch[2], 10);
+            const day = parseInt(isoMatch[3], 10);
+            const d = new Date(year, month - 1, day);
+            if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {
+                return this.toISO(d);
+            }
+        }
+        // Try natural string via Date.parse
+        const d = new Date(trimmed);
+        if (!isNaN(d.getTime())) {
+            return this.toISO(d);
+        }
+        return null;
+    }
+    isDateInRange(iso) {
+        if (!iso)
+            return true;
+        if (this.min && iso < this.min)
+            return false;
+        if (this.max && iso > this.max)
+            return false;
+        return true;
+    }
+    updateDropdownPosition() {
+        const rect = this.el.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';
+    }
+    render() {
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
+        const calendarIcon = (h("svg", { key: '9a8e37792f14af7af7f14ec86602b5c9bfb28b56', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, h("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+                'date-picker': true,
+                'date-picker--disabled': this.disabled,
+                'date-picker--error': !!this.error,
+                'date-picker--open': this.isOpen,
+            } }, this.label && (h("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && h("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && h("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+                'date-picker__dropdown': true,
+                'date-picker__dropdown--top': this.dropdownPosition === 'top',
+            } }, h("xplor-inline-date-picker", { key: '74c870356063103474e60245888b8b2ae67fcd1a', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+    }
+    get el() { return this; }
+    static get style() { return xplorDatePickerCss; }
+}, [2, "xplor-date-picker", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "type": [1],
+        "monthType": [1, "month-type"],
+        "display": [1],
+        "dateFormat": [1, "date-format"],
+        "min": [1],
+        "max": [1],
+        "readonly": [4],
+        "disabled": [4],
+        "clearable": [4],
+        "closeOnSelect": [4, "close-on-select"],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "startWeekOnSunday": [4, "start-week-on-sunday"],
+        "error": [1],
+        "hideDetails": [8, "hide-details"],
+        "required": [4],
+        "isOpen": [32],
+        "inputText": [32],
+        "dropdownPosition": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-date-picker", "xplor-inline-date-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorDatePicker$1);
+            }
+            break;
+        case "xplor-inline-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorDatePicker = XplorDatePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorDatePicker, defineCustomElement };
+//# sourceMappingURL=xplor-date-picker.js.map
+
+//# sourceMappingURL=xplor-date-picker.js.map

package/dist/components/xplor-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"xplor-date-picker.js","mappings":"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","names":["XplorDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-date-picker/xplor-date-picker.scss?tag=xplor-date-picker&encapsulation=scoped","src/components/xplor-date-picker/xplor-date-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.date-picker {\n  position: relative;\n  width: 100%;\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &__label {\n    display: block;\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    transition: border-color 0.2s ease;\n    background: white;\n\n    &:focus-within {\n      border-color: #008480;\n      border-width: 2px;\n\n      .date-picker__input {\n        padding: calc(0.875rem - 1px) calc(1rem - 1px);\n      }\n    }\n  }\n\n  &--error &__field {\n    border-color: #d32f2f;\n  }\n\n  &__input {\n    flex: 1;\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: none;\n    border-radius: 1rem;\n    outline: none;\n    background: transparent;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-right: 0.5rem;\n    flex-shrink: 0;\n  }\n\n  &__clear {\n    background: none;\n    border: none;\n    font-size: 1.25rem;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n  }\n\n  &__icon-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  &__icon-svg {\n    display: block;\n  }\n\n  &__text-display {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 4px;\n    color: #008480;\n    font-size: 1rem;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: rgba(0, 132, 128, 0.08);\n    }\n  }\n\n  &__text-value {\n    text-decoration: underline;\n  }\n\n  &__dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n    &--top {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-date-picker',\n  styleUrl: 'xplor-date-picker.scss',\n  scoped: true,\n})\nexport class XplorDatePicker {\n  @Element() el: HTMLElement;\n\n  /** Selected date in YYYY-MM-DD format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select date';\n\n  /** 'date' or 'month' */\n  @Prop() type: 'date' | 'month' = 'date';\n\n  /** For month type: select start or end of month */\n  @Prop() monthType: 'start' | 'end' = 'start';\n\n  /** 'input' shows text input, 'text' shows clickable text */\n  @Prop() display: 'input' | 'text' = 'input';\n\n  /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */\n  @Prop() dateFormat: 'short' | 'long' | 'iso' = 'short';\n\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() readonly: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() clearable: boolean = false;\n  @Prop() closeOnSelect: boolean = true;\n  @Prop() bgColor: string = 'white';\n  @Prop() color: string = '#008480';\n  @Prop() startWeekOnSunday: boolean = true;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() dropdownPosition: 'bottom' | 'top' = 'bottom';\n\n  @Event() dateChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.inputText = this.formatDateForDisplay(this.value);\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse YYYY-MM-DD safely without UTC shift */\n  private parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private formatDateForDisplay(iso: string): string {\n    const date = this.parseISODate(iso);\n    if (!date) return iso;\n\n    if (this.type === 'month') {\n      return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    switch (this.dateFormat) {\n      case 'long':\n        return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n      case 'iso':\n        return iso;\n      case 'short':\n      default:\n        return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);\n    }\n  }\n\n  private toISO(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  /** Parse user-typed text into YYYY-MM-DD */\n  private parseInputText(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return null;\n\n    // Try DD/MM/YYYY\n    const slashMatch = trimmed.match(/^(\\d{1,2})[/\\-.](\\d{1,2})[/\\-.](\\d{4})$/);\n    if (slashMatch) {\n      const day = parseInt(slashMatch[1], 10);\n      const month = parseInt(slashMatch[2], 10);\n      const year = parseInt(slashMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try YYYY-MM-DD\n    const isoMatch = trimmed.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n    if (isoMatch) {\n      const year = parseInt(isoMatch[1], 10);\n      const month = parseInt(isoMatch[2], 10);\n      const day = parseInt(isoMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try natural string via Date.parse\n    const d = new Date(trimmed);\n    if (!isNaN(d.getTime())) {\n      return this.toISO(d);\n    }\n\n    return null;\n  }\n\n  private isDateInRange(iso: string): boolean {\n    if (!iso) return true;\n    if (this.min && iso < this.min) return false;\n    if (this.max && iso > this.max) return false;\n    return true;\n  }\n\n  private updateDropdownPosition() {\n    const rect = this.el.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    // Try to parse typed text\n    const parsed = this.parseInputText(this.inputText);\n    if (parsed && this.isDateInRange(parsed)) {\n      this.value = parsed;\n      this.inputText = this.formatDateForDisplay(parsed);\n      this.dateChange.emit(parsed);\n    } else if (this.value) {\n      // Revert to current value display\n      this.inputText = this.formatDateForDisplay(this.value);\n    } else {\n      this.inputText = '';\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleDateSelected = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    const iso = event.detail;\n    if (!this.isDateInRange(iso)) return;\n\n    if (this.type === 'month') {\n      const d = this.parseISODate(iso);\n      if (d) {\n        let finalDate: Date;\n        if (this.monthType === 'end') {\n          finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        } else {\n          finalDate = new Date(d.getFullYear(), d.getMonth(), 1);\n        }\n        const finalIso = this.toISO(finalDate);\n        this.value = finalIso;\n        this.inputText = this.formatDateForDisplay(finalIso);\n        this.dateChange.emit(finalIso);\n      }\n    } else {\n      this.value = iso;\n      this.inputText = this.formatDateForDisplay(iso);\n      this.dateChange.emit(iso);\n    }\n\n    if (this.closeOnSelect) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.dateChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private handleTextClick = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const calendarIcon = (\n      <svg class=\"date-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'date-picker': true,\n          'date-picker--disabled': this.disabled,\n          'date-picker--error': !!this.error,\n          'date-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"date-picker__label\">\n              {this.label}\n              {this.required && <span class=\"date-picker__required\">*</span>}\n            </label>\n          )}\n\n          {this.display === 'text' ? (\n            <div class=\"date-picker__text-display\" onClick={this.handleTextClick}>\n              <span class=\"date-picker__text-value\">\n                {this.value ? this.formatDateForDisplay(this.value) : this.placeholder}\n              </span>\n              {calendarIcon}\n            </div>\n          ) : (\n            <div class=\"date-picker__field\">\n              <input\n                type=\"text\"\n                class=\"date-picker__input\"\n                value={this.inputText}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                onFocus={this.handleInputFocus}\n                onBlur={this.handleInputBlur}\n                onInput={this.handleInputChange}\n                style={{ backgroundColor: this.bgColor }}\n              />\n              <div class=\"date-picker__actions\">\n                {this.clearable && this.value && !this.disabled && !this.readonly && (\n                  <button type=\"button\" class=\"date-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                    ×\n                  </button>\n                )}\n                <button type=\"button\" class=\"date-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open calendar\">\n                  {calendarIcon}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"date-picker__details\">\n              {this.error && <div class=\"date-picker__error-message\">{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class={{\n              'date-picker__dropdown': true,\n              'date-picker__dropdown--top': this.dropdownPosition === 'top',\n            }}>\n              <xplor-inline-date-picker\n                selectedDate={this.value}\n                min={this.min}\n                max={this.max}\n                readonly={this.readonly}\n                color={this.color}\n                startWeekOnSunday={this.startWeekOnSunday}\n                onDateSelected={this.handleDateSelected}\n              ></xplor-inline-date-picker>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-drag-and-drop-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorDragAndDropInput extends Components.XplorDragAndDropInput, HTMLElement {}
+export const XplorDragAndDropInput: {
+    prototype: XplorDragAndDropInput;
+    new (): XplorDragAndDropInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-drag-and-drop-input.js

@@ -0,0 +1,138 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-DIv_A5Gj.js';
+
+const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\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-wrapper.sc-xplor-drag-and-drop-input {\n  position: relative;\n  padding-bottom: 2.5rem;\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: var(--color-secondary-50, #f3e5f5);\n  border-radius: 8px;\n  border: 3px dashed #e0e0e0;\n  min-height: 240px;\n  padding: 1rem 1.5rem 2.5rem;\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-secondary);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 3px dashed var(--color-secondary);\n  background-color: var(--color-secondary-100, #e1bee7);\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: 1rem;\n  padding: 0.5rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 68px;\n  height: 68px;\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: 32px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .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: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n.drag-drop-card__file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  color: #616161;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  padding: 0.25rem;\n  text-align: center;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 200px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 20px;\n    line-height: 28px;\n  }\n  .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}";
+
+const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
+const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDragAndDropInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fileSelect = createEvent(this, "fileSelect");
+        this.fileClear = createEvent(this, "fileClear");
+        /**
+         * Disable the file upload
+         */
+        this.disabled = false;
+        /**
+         * Accepted file types (e.g., 'image/png,.pdf')
+         */
+        this.accepts = DEFAULT_ACCEPT_ALL;
+        /**
+         * Instruction text displayed in the drop zone
+         */
+        this.label = 'Drag and drop your file here';
+        /**
+         * Browse button label text
+         */
+        this.browseLabel = 'Browse Files';
+        this.dragover = false;
+        this.currentFile = null;
+        this.onDrop = (e) => {
+            var _a, _b;
+            e.preventDefault();
+            this.dragover = false;
+            if (this.disabled)
+                return;
+            const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+            if (file) {
+                this.currentFile = file;
+                this.fileSelect.emit(this.currentFile);
+            }
+        };
+        this.onDragOver = (e) => {
+            e.preventDefault();
+            if (!this.disabled) {
+                this.dragover = true;
+            }
+        };
+        this.onDragEnter = (e) => {
+            e.preventDefault();
+            if (!this.disabled) {
+                this.dragover = true;
+            }
+        };
+        this.onDragLeave = (e) => {
+            e.preventDefault();
+            this.dragover = false;
+        };
+        this.onFileSelect = (e) => {
+            var _a;
+            const input = e.target;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                this.currentFile = file;
+                this.fileSelect.emit(this.currentFile);
+            }
+            input.value = '';
+        };
+        this.openFileDialog = () => {
+            var _a;
+            if (this.disabled) {
+                return;
+            }
+            (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.getAcceptsLabel = () => {
+            var _a;
+            const accepts = (_a = this.accepts) === null || _a === void 0 ? void 0 : _a.trim();
+            if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {
+                return '*';
+            }
+            return accepts;
+        };
+    }
+    /**
+     * Clears the currently selected file
+     */
+    async clearCurrentFile() {
+        this.currentFile = null;
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+        this.fileClear.emit();
+    }
+    render() {
+        return (h(Host, { key: 'b72e4af7297041c85e4739d815a306ff911e7aa1' }, h("div", { key: '40ffa20b154c281bfc25b9b84ad4c2f0b8ed8ccb', class: "drag-drop-wrapper" }, h("div", { key: '32129f70d878d4d9521125038ea19deddfed91d4', class: {
+                'drag-drop-card': true,
+                'drag-drop-card--dragover': this.dragover,
+                'drag-drop-card--disabled': this.disabled,
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave }, h("div", { key: 'a85fdd90c7906f3aaaa7abc8d32242c8187962fe', class: "drag-drop-card__content" }, h("svg", { key: '6db73c93ac4466f211877acf4624e619e1a720f3', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '498a203a5dd4bae94216812bbd0bb50e7754ab87', 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", fill: "currentColor", opacity: "0.3" }), h("path", { key: 'eb67e96947f184dab5a6b85987ef7938993b5f33', 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", fill: "currentColor" })), h("h3", { key: 'e37febff26d168eee495b5bc7dd49346fdb1079f', class: "drag-drop-card__title" }, this.label), h("p", { key: '514955f0836288b51e45d1ddaefe5eb2361e6007', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: 'd390f6dc61ba8d87a512ca216c46dc8faf6d76a8', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '2127925fcb39ec6adea03f107ffe6faaee5a0c48', class: "drag-drop-card__action" }, h("xplor-button", { key: '0659fa9bcc6f363516aebc12f66329f1aee630ab', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog })), this.currentFile && (h("div", { key: 'f6a788d77dd8d6f725ee0c6fde06ee3dbbadd77b', class: "drag-drop-card__file-info" }, "File Selected: ", this.currentFile.name))), h("input", { key: 'c514f68ceea5a5c6fd51e9bbe2098d100c6a9870', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect })));
+    }
+    static get style() { return xplorDragAndDropInputCss; }
+}, [2, "xplor-drag-and-drop-input", {
+        "disabled": [4],
+        "accepts": [1],
+        "label": [1],
+        "browseLabel": [1, "browse-label"],
+        "dragover": [32],
+        "currentFile": [32],
+        "clearCurrentFile": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-drag-and-drop-input", "xplor-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-drag-and-drop-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorDragAndDropInput$1);
+            }
+            break;
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorDragAndDropInput = XplorDragAndDropInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorDragAndDropInput, defineCustomElement };
+//# sourceMappingURL=xplor-drag-and-drop-input.js.map
+
+//# sourceMappingURL=xplor-drag-and-drop-input.js.map

package/dist/components/xplor-drag-and-drop-input.js.map

@@ -0,0 +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-wrapper {\n  position: relative;\n  padding-bottom: spacing.$spacing-40;\n}\n\n.drag-drop-input-hidden {\n  display: none;\n}\n\n.drag-drop-card {\n  background-color: colours.$secondary-50;\n  border-radius: 8px;\n  border: 3px dashed colours.$gray-300;\n  min-height: 240px;\n  padding: spacing.$spacing-16 spacing.$spacing-24 spacing.$spacing-40;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n\n  &:hover:not(&--disabled) {\n    border-color: colours.$secondary;\n  }\n\n  &--dragover {\n    border: 3px dashed colours.$secondary;\n    background-color: colours.$secondary-100;\n  }\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n}\n\n.drag-drop-card__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: spacing.$spacing-16;\n  padding: spacing.$spacing-8 0 0;\n}\n\n.drag-drop-card__icon {\n  color: colours.$secondary;\n  width: 68px;\n  height: 68px;\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: 32px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts,\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: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n.drag-drop-card__file-info {\n  margin-top: spacing.$spacing-16;\n  color: colours.$gray-700;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  padding: spacing.$spacing-4;\n  text-align: center;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card {\n    min-height: 200px;\n  }\n\n  .drag-drop-card__title {\n    font-size: 20px;\n    line-height: 28px;\n  }\n\n  .drag-drop-card__accepts,\n  .drag-drop-card__divider {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\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 file here';\n\n  /**\n   * Browse button label text\n   */\n  @Prop() browseLabel: string = 'Browse Files';\n\n  @State() dragover: boolean = false;\n  @State() currentFile: File | null = null;\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\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  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"drag-drop-wrapper\">\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          >\n            <div class=\"drag-drop-card__content\">\n              <svg\n                class=\"drag-drop-card__icon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\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              <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n              <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              <p class=\"drag-drop-card__divider\">or</p>\n            </div>\n          </div>\n\n          <div class=\"drag-drop-card__action\">\n            <xplor-button\n              text={this.browseLabel}\n              type={this.disabled ? 'disabled' : 'secondary'}\n              clickAction={this.openFileDialog}\n            ></xplor-button>\n          </div>\n\n          {this.currentFile && (\n            <div class=\"drag-drop-card__file-info\">\n              File Selected: {this.currentFile.name}\n            </div>\n          )}\n        </div>\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        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorDropdown extends Components.XplorDropdown, HTMLElement {}
+export const XplorDropdown: {
+    prototype: XplorDropdown;
+    new (): XplorDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-dropdown.js

@@ -0,0 +1,9 @@
+import { X as XplorDropdown$1, d as defineCustomElement$1 } from './p-CJGP2_5k.js';
+
+const XplorDropdown = XplorDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorDropdown, defineCustomElement };
+//# sourceMappingURL=xplor-dropdown.js.map
+
+//# sourceMappingURL=xplor-dropdown.js.map

package/dist/components/xplor-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"xplor-dropdown.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/xplor-expansion-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorExpansionPanel extends Components.XplorExpansionPanel, HTMLElement {}
+export const XplorExpansionPanel: {
+    prototype: XplorExpansionPanel;
+    new (): XplorExpansionPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;