npm - @xplor-education/core-stencil-components - Versions diffs - 2.1.0 → 3.1.1 - Mend

@xplor-education/core-stencil-components 2.1.0 → 3.1.1

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 (318) hide show

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

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-CXJd350E.js';
+import { d as defineCustomElement$2 } from './p-DQ8MCJFX.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}";
+let datePickerIdCounter = 0;
 const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker extends H {
     constructor() {
         super();
@@ -38,6 +39,9 @@ const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker
         this.isOpen = false;
         this.inputText = '';
         this.dropdownPosition = 'bottom';
+        this.inputId = `xplor-date-picker-${++datePickerIdCounter}`;
+        this.labelId = `${this.inputId}-label`;
+        this.errorId = `${this.inputId}-error`;
         this.toggleDropdown = () => {
             if (this.disabled || this.readonly)
                 return;
@@ -203,16 +207,16 @@ const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker
     }
     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: {
+        const calendarIcon = (h("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', 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: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', 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: {
+            } }, this.label && (h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, 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 }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), 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: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', 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 }))))));
+            } }, h("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', 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; }

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

	@@ -1 +1 @@
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}
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\nlet datePickerIdCounter = 0;\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 private inputId = `xplor-date-picker-${++datePickerIdCounter}`;\n private labelId = `${this.inputId}-label`;\n private errorId = `${this.inputId}-error`;\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\" id={this.labelId} htmlFor={this.inputId}>\n {this.label}\n {this.required && <span class=\"date-picker__required\"></span>}\n </label>\n )}\n\n {this.display === 'text' ? (\n <div\n class=\"date-picker__text-display\"\n onClick={this.handleTextClick}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n role=\"button\"\n tabIndex={0}\n >\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 id={this.inputId}\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 aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n aria-describedby={this.error ? this.errorId : undefined}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\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\" id={this.errorId}>{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.js CHANGED Viewed

@@ -1,7 +1,7 @@
 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';
+import { d as defineCustomElement$2 } from './p-B5rS_jjI.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-zone.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: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1rem 1.5rem 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-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\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.25rem;\n  padding: 0.25rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\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: 18px;\n  font-weight: 700;\n  line-height: 24px;\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.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}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\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 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-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: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1.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  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\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.75rem;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\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: 18px;\n  font-weight: 700;\n  line-height: 24px;\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  margin-top: 0.25rem;\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}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\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 {
@@ -125,13 +125,15 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         this.fileClear.emit();
     }
     render() {
-        return (h(Host, { key: '1996cf8e0d65afed803bb07a2f7a54adb5bbfaa5' }, h("div", { key: '6fcf52a709e3d6b7e64583f201260e1841076cef', class: "drag-drop-zone" }, h("div", { key: 'a9c8bd35981166cf075bd9f0d215914ff87a0ff0', class: {
+        const progressValue = Math.min(Math.max(this.progress, 0), 100);
+        const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
+        return (h(Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, h("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, h("div", { key: 'f15e206b7f1e1741f5ee96681e000400e72d66b1', 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: 'eec73d07cce31d43151a6af27a584f764cf104ec', class: "drag-drop-card__content" }, h("svg", { key: '75fe85db121bdf98d91872f847235e42f3505021', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '454bda7cf271281374b965182d15120ab00059e1', 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: '8bc44934968795b791cd4183e18f3d72f7a195de', 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: 'e17238c5e6bdb38ef75c5513c88154696a046273', class: "drag-drop-card__title" }, this.label), h("p", { key: 'b6aa94f6624a1fb09a56ca26dd31981aa56c3e8a', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: '0a6cb23bff2f8512e961cf3fae65463aec2f829e', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '8ad03f8da13062f5915005c80f88d41d4adc7e83', class: "drag-drop-card__action" }, h("xplor-button", { key: '37dd6e0f4d61a6e4aa3e0648227b5c06b101d7f3', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog }))), this.currentFile && (h("div", { key: '7ab8ffd9e6fa79c3adb83127c2263dbf1c8356af', class: "file-info" }, this.showProgress() && (h("p", { key: '34e1f54d42c866012faad5462935400ad64fd69a', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '891749a5bc2d928226cdcdf855b992a94c46ec0e', class: "file-info__card" }, h("div", { key: 'df6230a7fed1e37536756d0d2ca79a7fa0f3f3b0', class: "file-info__icon" }, h("svg", { key: '6f740a420e16cf0b8e1a008ac1e69a5356db1789', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '0cc9aa35e50ec4c04662abcef793175d56337e71', 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" }))), h("div", { key: 'cf0dc9b9592721a4e488fb852515273bdb5f75ad', class: "file-info__details" }, h("p", { key: '082e3dc60b75a1b889c3390c140e32e232b57bff', class: "file-info__name" }, this.currentFile.name), h("p", { key: '79da132f579221a718e4725e12dff7efb7b5f82f', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', 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: '04dc16407d2abd999fbef9cc02346d499644f0a7', 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: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), h("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, h("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, h("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', 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" }))), h("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, h("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (h("div", { key: 'ff641e3fb53d0089c9392f1c77e7943783fa4745', class: "file-info__progress-row" }, h("div", { key: '57bade7b09cd9700d6cdfe123b79b1f59d049b3e', class: "file-info__progress-bar" }, h("div", { key: '8119c5937118adab06ae53257374964ced4b8446', class: "file-info__progress-fill", style: { width: `${Math.min(Math.max(this.progress, 0), 100)}%` } })), h("span", { key: 'dca1ccade071119e10b724a8d0047ec966c78ed4', class: "file-info__progress-text" }, Math.round(this.progress), "%")))), h("button", { key: 'e9142fab6e8f708cdd6063c6ff3659bd8e6f77e6', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": "Remove file" }, h("svg", { key: 'bc48ad8ce10fbed57c5bcbed53d8f2931461b90e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '514e5299c4f288807c557035a0fa6c28fa770e3d', 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" })))))), h("input", { key: '38d92776629e98032272631ed3a26a018c2ea7cc', 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 })));
+            : ''), this.showProgress() && (h("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, h("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '0131e03966350788114f5ac999488c19d0186f90', 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" })))))), h("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', 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, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
     }
     static get style() { return xplorDragAndDropInputCss; }
 }, [2, "xplor-drag-and-drop-input", {
@@ -139,6 +141,7 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         "accepts": [1],
         "label": [1],
         "browseLabel": [1, "browse-label"],
+        "ariaLabel": [1, "aria-label"],
         "progress": [2],
         "dragover": [32],
         "currentFile": [32],

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

	@@ -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 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.$gray-100;\n border-radius: 8px;\n border: 2px dashed colours.$secondary;\n min-height: 160px;\n padding: spacing.$spacing-16 spacing.$spacing-24 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.$secondary;\n background-color: colours.$gray-200;\n }\n\n &--dragover {\n border: 2px dashed colours.$secondary;\n background-color: colours.$gray-200;\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-4;\n padding: spacing.$spacing-4 0 0;\n}\n\n.drag-drop-card__icon {\n color: colours.$secondary;\n width: 40px;\n height: 40px;\n}\n\n.drag-drop-card__title {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 18px;\n font-weight: 700;\n line-height: 24px;\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// File info section (shown after file is selected)\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\n@media (max-width: 768px) {\n .drag-drop-card {\n min-height: 140px;\n }\n\n .drag-drop-card__title {\n font-size: 16px;\n line-height: 22px;\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 files here';\n\n /\n Browse button label text\n /\n @Prop() browseLabel: string = 'Browse Files';\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\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 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 return (\n <Host>\n <div class=\"drag-drop-zone\">\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=\"40\"\n height=\"40\"\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 </div>\n\n {this.currentFile && (\n <div class=\"file-info\">\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\">\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 class=\"file-info__progress-bar\">\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${Math.min(Math.max(this.progress, 0), 100)}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\">{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\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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 />\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}\n\n.drag-drop-input-hidden {\n display: none;\n}\n\n.drag-drop-card {\n background-color: colours.$gray-100;\n border-radius: 8px;\n border: 2px dashed colours.$secondary;\n min-height: 160px;\n padding: spacing.$spacing-24;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n\n &:hover:not(&--disabled) {\n border-color: colours.$secondary;\n background-color: colours.$gray-200;\n }\n\n &--dragover {\n border: 2px dashed colours.$secondary;\n background-color: colours.$gray-200;\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-12;\n}\n\n.drag-drop-card__icon {\n color: colours.$secondary;\n width: 40px;\n height: 40px;\n}\n\n.drag-drop-card__title {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 18px;\n font-weight: 700;\n line-height: 24px;\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 margin-top: spacing.$spacing-4;\n}\n\n// File info section (shown after file is selected)\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\n@media (max-width: 768px) {\n .drag-drop-card {\n min-height: 140px;\n }\n\n .drag-drop-card__title {\n font-size: 16px;\n line-height: 22px;\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 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;\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\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 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\">\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 <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\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 <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 class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'secondary'}\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/dist/components/xplor-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorDropdown$1, d as defineCustomElement$1 } from './p-oOSnPjGy.js';
+import { X as XplorDropdown$1, d as defineCustomElement$1 } from './p-J41B2nOt.js';
 const XplorDropdown = XplorDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/xplor-expansion-panel.js CHANGED Viewed

@@ -32,16 +32,16 @@ const XplorExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpans
         }
     }
     render() {
-        return (h(Host, { key: 'f2b19e6a1ad6315341e0840e2c000a1123caa7e0' }, h("div", { key: '1cb9ca368efb2f9e16c64c3987546f3d16981a2b', class: {
+        return (h(Host, { key: '3db1f2fc99643b6c032e49d12c8eedb06ae2ceb9' }, h("div", { key: 'ba08fc1332346fd14e2614184a2da5f99c90e217', class: {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, h("button", { key: '4970230eb38600f662441cf741b1266af1c94221', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, h("div", { key: '5e3330870f44e2f0d0e9546cc3921f999c585ad2', class: "expansion-panel__header-content" }, h("slot", { key: 'f8cf1d3dcc8201c311adb40544adc59dc10643b2', name: "header" })), h("span", { key: 'bed27404d65c83a0aed80b6f63847a3b221756c4', class: {
+            } }, h("button", { key: 'b370c00ac9b58af67594679a7c28915d7ecaf622', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, h("div", { key: '7a2a65a0189cb9fbdbca615091f6e13e3d94b748', class: "expansion-panel__header-content" }, h("slot", { key: 'a20162d047d41cf219fb412973a92c3f16844640', name: "header" })), h("span", { key: '4dd148cb2d4461285fce95de5bf8cbb3df36e7b7', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), h("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), h("div", { key: '9d8a260d927387f5dd1e7e3d429f86d31f2689bf', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, h("div", { key: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
+            } }, h("div", { key: '0ac08b6ca30a0fabc7e44f2c8737ee29fccec08a', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: '94753fe13b1378a95cac9cb4c940aedbc127c1b0' }))))));
     }
     get el() { return this; }
     static get style() { return xplorExpansionPanelCss; }

package/dist/components/xplor-expansion-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-expansion-panel.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4yQAA4yQ;;ACE30Q,IAAI,MAAM,GAAG,CAAC;MAODA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAQY,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACR,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAGrC,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAoB1B,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;YAGnE,UAAU,CAAC,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;AACnD,SAAC;~~AAgDJ~~;~~IAtEG~~,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS,MAAM,EAAE,EAAE;;IAGtC,gBAAgB,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;IAGtB,mBAAmB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY;;;IAcxD,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,IAAI,CAAC,IAAI;gBAClC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;~~AAC7C~~,~~aAAA,~~EAAA,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EACR~~,~~eAAA,EAAA,~~IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,~~EAC3C~~,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,6BAA6B,EAAE,IAAI,CAAC,IAAI;AAC3C,aAAA,EAAA,EAAA,QAAA,CAGE,CACF,EACT,~~CAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EACI~~,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,CAAI,GAAG,GAAG;aACzD,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,CACJ,CACJ,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panel/xplor-expansion-panel.scss?tag=xplor-expansion-panel&encapsulation=scoped","src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.expansion-panel {\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n overflow: hidden;\n\n &+& {\n margin-top: -1px;\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n\n.expansion-panel__header {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n background-color: #f5f5f5;\n border: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.2s;\n font-family: inherit;\n font-size: inherit;\n\n &:hover:not(:disabled) {\n background-color: #eeeeee;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.expansion-panel__header-content {\n flex: 1;\n font-weight: 500;\n}\n\n.expansion-panel__icon {\n display: inline-block;\n transition: transform 0.3s ease;\n font-size: 0.75rem;\n margin-left: 0.5rem;\n\n &--open {\n transform: rotate(180deg);\n }\n}\n\n.expansion-panel__content {\n overflow: hidden;\n transition: max-height 0.3s ease;\n background-color: #fff;\n}\n\n.expansion-panel__content-inner {\n padding: 1rem 1.5rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'xplor-expansion-panel',\n styleUrl: 'xplor-expansion-panel.scss',\n scoped: true,\n})\nexport class XplorExpansionPanel {\n @Element() el: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop({ mutable: true }) open: boolean = false;\n\n @State() panelId: string;\n @State() contentHeight: number = 0;\n\n @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n private contentEl: HTMLDivElement;\n\n componentWillLoad() {\n this.panelId = `panel-${nextId++}`;\n }\n\n componentDidLoad() {\n this.updateContentHeight();\n }\n\n private updateContentHeight() {\n if (this.contentEl) {\n this.contentHeight = this.contentEl.scrollHeight;\n }\n }\n\n private handleToggle = () => {\n if (this.disabled) return;\n\n this.open = !this.open;\n this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n // Update height after toggle\n setTimeout(() => this.updateContentHeight(), 0);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'expansion-panel': true,\n 'expansion-panel--open': this.open,\n 'expansion-panel--disabled': this.disabled,\n }}\n >\n <button\n class=\"expansion-panel__header\"\n onClick={this.handleToggle}\n disabled={this.disabled}\n aria-expanded={this.open ? 'true' : 'false'}\n type=\"button\"\n >\n <div class=\"expansion-panel__header-content\">\n <slot name=\"header\" />\n </div>\n <span\n class={{\n 'expansion-panel__icon': true,\n 'expansion-panel__icon--open': this.open,\n }}\n >\n ▼\n </span>\n </button>\n <div\n class=\"expansion-panel__content\"\n style={{\n maxHeight: this.open ? `${this.contentHeight}px` : '0',\n }}\n >\n <div\n class=\"expansion-panel__content-inner\"\n ref={(el) => (this.contentEl = el)}\n >\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-expansion-panel.js","mappings":"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","names":["XplorExpansionPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panel/xplor-expansion-panel.scss?tag=xplor-expansion-panel&encapsulation=scoped","src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.expansion-panel {\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n overflow: hidden;\n\n &+& {\n margin-top: -1px;\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n\n.expansion-panel__header {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n background-color: #f5f5f5;\n border: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.2s;\n font-family: inherit;\n font-size: inherit;\n\n &:hover:not(:disabled) {\n background-color: #eeeeee;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.expansion-panel__header-content {\n flex: 1;\n font-weight: 500;\n}\n\n.expansion-panel__icon {\n display: inline-block;\n transition: transform 0.3s ease;\n font-size: 0.75rem;\n margin-left: 0.5rem;\n\n &--open {\n transform: rotate(180deg);\n }\n}\n\n.expansion-panel__content {\n overflow: hidden;\n transition: max-height 0.3s ease;\n background-color: #fff;\n}\n\n.expansion-panel__content-inner {\n padding: 1rem 1.5rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n tag: 'xplor-expansion-panel',\n styleUrl: 'xplor-expansion-panel.scss',\n scoped: true,\n})\nexport class XplorExpansionPanel {\n @Element() el: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop({ mutable: true }) open: boolean = false;\n\n @State() panelId: string;\n @State() contentHeight: number = 0;\n\n @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n private contentEl: HTMLDivElement;\n\n componentWillLoad() {\n this.panelId = `panel-${nextId++}`;\n }\n\n componentDidLoad() {\n this.updateContentHeight();\n }\n\n private updateContentHeight() {\n if (this.contentEl) {\n this.contentHeight = this.contentEl.scrollHeight;\n }\n }\n\n private handleToggle = () => {\n if (this.disabled) return;\n\n this.open = !this.open;\n this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n // Update height after toggle\n setTimeout(() => this.updateContentHeight(), 0);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'expansion-panel': true,\n 'expansion-panel--open': this.open,\n 'expansion-panel--disabled': this.disabled,\n }}\n >\n <button\n class=\"expansion-panel__header\"\n onClick={this.handleToggle}\n disabled={this.disabled}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`${this.panelId}-content`}\n type=\"button\"\n >\n <div class=\"expansion-panel__header-content\">\n <slot name=\"header\" />\n </div>\n <span\n class={{\n 'expansion-panel__icon': true,\n 'expansion-panel__icon--open': this.open,\n }}\n >\n ▼\n </span>\n </button>\n <div\n class=\"expansion-panel__content\"\n id={`${this.panelId}-content`}\n role=\"region\"\n aria-labelledby={this.panelId}\n style={{\n maxHeight: this.open ? `${this.contentHeight}px` : '0',\n }}\n >\n <div\n class=\"expansion-panel__content-inner\"\n ref={(el) => (this.contentEl = el)}\n >\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-expansion-panels.js CHANGED Viewed

@@ -38,7 +38,7 @@ const XplorExpansionPanels$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpan
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (h(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, h("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, h("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
+        return (h(Host, { key: '70452b8f734ded39c59a984b6a21e010d6512905' }, h("div", { key: '60ba67dc176b9cc141dd12d56e9f3e977eccd859', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '99b9f4d51d54b8145ea0964638eecf687c2c8432' }))));
     }
     static get style() { return xplorExpansionPanelsCss; }
 }, [6, "xplor-expansion-panels", {