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

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

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

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-wrapper {\n position: relative;\n padding-bottom: spacing.$spacing-40;\n}\n\n.drag-drop-input-hidden {\n display: none;\n}\n\n.drag-drop-card {\n background-color: colours.$secondary-50;\n border-radius: 8px;\n border: 3px dashed colours.$gray-300;\n min-height: 240px;\n padding: spacing.$spacing-16 spacing.$spacing-24 spacing.$spacing-40;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n\n &:hover:not(&--disabled) {\n border-color: colours.$secondary;\n }\n\n &--dragover {\n border: 3px dashed colours.$secondary;\n background-color: colours.$secondary-100;\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n}\n\n.drag-drop-card__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.$spacing-16;\n padding: spacing.$spacing-8 0 0;\n}\n\n.drag-drop-card__icon {\n color: colours.$secondary;\n width: 68px;\n height: 68px;\n}\n\n.drag-drop-card__title {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 32px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts,\n.drag-drop-card__divider {\n color: colours.$black;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n margin: 0;\n}\n\n.drag-drop-card__action {\n position: absolute;\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n}\n\n.drag-drop-card__file-info {\n margin-top: spacing.$spacing-16;\n color: colours.$gray-700;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n padding: spacing.$spacing-4;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .drag-drop-card {\n min-height: 200px;\n }\n\n .drag-drop-card__title {\n font-size: 20px;\n line-height: 28px;\n }\n\n .drag-drop-card__accepts,\n .drag-drop-card__divider {\n font-size: 13px;\n line-height: 18px;\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '' + '/' + '';\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /*\n Disable the file upload\n /\n @Prop() disabled: boolean = false;\n\n /\n Accepted file types (e.g., 'image/png,.pdf')\n /\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /\n Instruction text displayed in the drop zone\n /\n @Prop() label: string = 'Drag and drop your file here';\n\n /\n Browse button label text\n /\n @Prop() browseLabel: string = 'Browse Files';\n\n @State() dragover: boolean = false;\n @State() currentFile: File \| null = null;\n\n /\n Emitted when a file is selected via drop or click\n /\n @Event() fileSelect: EventEmitter<File>;\n\n /\n Emitted when the current file is cleared\n /\n @Event() fileClear: EventEmitter<void>;\n\n private fileInputEl: HTMLInputElement;\n\n /\n Clears the currently selected file\n /\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts \|\| accepts === DEFAULT_ACCEPT_ALL) {\n return '';\n }\n\n return accepts;\n };\n\n render() {\n return (\n <Host>\n <div class=\"drag-drop-wrapper\">\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n >\n <div class=\"drag-drop-card__content\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"60\"\n height=\"60\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n fill=\"currentColor\"\n />\n </svg>\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n <p class=\"drag-drop-card__divider\">or</p>\n </div>\n </div>\n\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'secondary'}\n clickAction={this.openFileDialog}\n ></xplor-button>\n </div>\n\n {this.currentFile && (\n <div class=\"drag-drop-card__file-info\">\n File Selected: {this.currentFile.name}\n </div>\n )}\n </div>\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n />\n </Host>\n );\n }\n}\n"],"version":3}
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}

package/dist/components/xplor-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorDropdown$1, d as defineCustomElement$1 } from './p-CJGP2_5k.js';
+import { X as XplorDropdown$1, d as defineCustomElement$1 } from './p-oOSnPjGy.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: '0049148b013c93b1dc071a2ab339b600c9335d14' }, h("div", { key: '95ea285cf259218ecd924ca99ea60f8f82624802', class: {
+        return (h(Host, { key: 'f2b19e6a1ad6315341e0840e2c000a1123caa7e0' }, h("div", { key: '1cb9ca368efb2f9e16c64c3987546f3d16981a2b', class: {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, h("button", { key: '6830f386af7ffbbcc126c3e048ea37ba774aea1c', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, h("div", { key: '07214bcf411e7778d7dd0effb53dfb9d65604646', class: "expansion-panel__header-content" }, h("slot", { key: '351b3e28b5d57169f79aae1fec0df8721a4557e4', name: "header" })), h("span", { key: '041f8e499549325dd46fae89f7797576e43e047c', class: {
+            } }, 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: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), h("div", { key: 'c24a708cb5fb363d4e5e17e34604341872f9e4da', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), h("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, h("div", { key: 'cace106961690c2f4e1312f273136b9342f7eaca', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'c29f780d6929b5f9687ea381cf332cfc945c8b5b' }))))));
+            } }, h("div", { key: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
     }
     get el() { return this; }
     static get style() { return xplorExpansionPanelCss; }

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: '84799902825dd3245333d6ae1e3c2016bfe4351c' }, h("div", { key: 'b43833c79be3f85cb941fd26a57f31efddc4b898', class: "expansion-panels" }, h("slot", { key: '56a99fa50bad4de4b1955ce7fd10db7eefa2b0fe' }))));
+        return (h(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, h("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, h("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
     }
     static get style() { return xplorExpansionPanelsCss; }
 }, [6, "xplor-expansion-panels", {

package/dist/components/xplor-inline-checkbox.js CHANGED Viewed

@@ -39,9 +39,9 @@ const XplorInlineCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorInline
             'xplor-inline-checkbox--disabled': this.disabled,
             'xplor-inline-checkbox--checked': this.checked,
         };
-        return (h(Host, { key: 'e8d3c2bfb8824944eb230ab67dd282da16eac103' }, h("label", { key: 'ecbecd91460e78f0e1fa50013b36d8ff37fbaa65', class: containerClasses }, h("input", { key: '6e5ad3043737fc8fcd46c477cd11279a18df6646', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
+        return (h(Host, { key: '2273357108dc65e665f9fdd9dcece4d4ed8edac3' }, h("label", { key: '630091008ad489a1cc4c0e71ef1ae802ef4b0c89', class: containerClasses }, h("input", { key: '0c823ba53cb0d25d4823e42bcb037efaeddff405', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
                 accentColor: this.color,
-            } }), this.label && h("span", { key: '9ae4683f392b63af41286676b0bd6c648fc9571a', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: 'd6d6642934b65aacf4d5ed899b925b7445414ae0' }))));
+            } }), this.label && h("span", { key: '9e1bbb0bd85cc7cfe7d760501507d68dcc3bf3c2', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '7a95d78de68af2887149bd6eb9f08330b9c57d6b' }))));
     }
     static get style() { return xplorInlineCheckboxCss; }
 }, [6, "xplor-inline-checkbox", {

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

@@ -1,4 +1,4 @@
-import { X as XplorInlineDatePicker$1, d as defineCustomElement$1 } from './p-BIFlTsO8.js';
+import { X as XplorInlineDatePicker$1, d as defineCustomElement$1 } from './p-CXJd350E.js';
 const XplorInlineDatePicker = XplorInlineDatePicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/xplor-inline-switch.js CHANGED Viewed

@@ -35,7 +35,7 @@ const XplorInlineSwitch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInlineSw
             'xplor-inline-switch--disabled': this.disabled,
             'xplor-inline-switch--checked': this.checked,
         };
-        return (h(Host, { key: '02ad648d6ff7606f9801fd7900afd96725bd127f' }, h("label", { key: '7b981a71ec242a3ced40544f84b10975bed2a9ba', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '79e95af6e8d77c24471441542638bd2b8eb1781a', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: 'a44af41de8093b31f20bcee05aa755775cc2d399', class: "xplor-inline-switch__track" }, h("span", { key: '42b43f6ce8672a04efd673822558fe083223ecc0', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: 'c0393b42d7f2974f3f545e18d4a202d55c7eb98f', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '467c6d0a8f46a8fe5720071d6eedd99f2872835e' }))));
+        return (h(Host, { key: 'd881ff0653ee51f1ddc8c146ccc6f70f3c128e3b' }, h("label", { key: '2ffe4cdf99f925c5973657769f056cffb8bea283', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '60fb990d1dce371c3579da91bd0d9fd4dd50f82b', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: '28e9f5444653009f4b56d510c2d73ba710e93115', class: "xplor-inline-switch__track" }, h("span", { key: 'f002449aa843c0b268dbc38d94dbf44a0e68d0de', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: 'f460d55e6cbaab94806c8025a1d17cd4d4b6790b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '59e3248368aab93dd48287f3facdbe9221a39f5b' }))));
     }
     static get style() { return xplorInlineSwitchCss; }
 }, [6, "xplor-inline-switch", {

package/dist/components/xplor-input-file.js CHANGED Viewed

@@ -82,7 +82,7 @@ const XplorInputFile$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputFile e
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (h(Host, { key: '40fb5f31ec8451dc63096f535164de6f6eb11014' }, h("div", { key: 'b52686901e2d3bbd56cfb0ee3088bfbf5f8ec365', class: containerClasses }, this.label && (h("label", { key: 'f73832f4c1a8f41690db70e301474d56c6c969b7', class: "xplor-input-file__label" }, this.label)), h("div", { key: '46512b939981a4b4f07ad87f5f9c82c9acb0e7a2', class: "xplor-input-file__field" }, h("span", { key: 'd30c938dff0d36ab2973ce69c29388ed6391317d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '9d6bb0b0e5ec09e81f9ee57360d84f2239bf5270', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'a1300d4dce7eed67552774efeb8edc8ce1a41dd7', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '41285fdb00cc6e52466b665d5c1fd5bbb4fc54e1', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: 'e11fcc8dab8fb8d73fda9f6b82f2187e65ba61c2', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (h(Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get style() { return xplorInputFileCss; }
 }, [2, "xplor-input-file", {

package/dist/components/xplor-input-search.js CHANGED Viewed

@@ -52,9 +52,9 @@ const XplorInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSear
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (h(Host, { key: 'c608c1ad9c73dc708aaf5d985b0e376ad7923b59' }, h("div", { key: '8efabc2eea7bf741658a8d01f4b6ed14b259de82', class: containerClasses }, h("div", { key: '82384b7cf2967ca26e8d3b1358a5c9266fa09f20', class: "xplor-input-search__field" }, h("input", { key: '57a6c1dc9fff69f25bd75ad78e9c092e593cbee1', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, h("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8656098e81af32b857589443a89f009791429d2d', name: "append-inner" }, h("button", { key: 'ca36754aec41e189e4b870103fe82efb8667d895', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: '3e5f9f080c757f46e17641c549bfda7eeb0d9b30', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: 'c5814684ea375fe19074f47234cc11f919a4db5c', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+            } }), h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
     }
     static get style() { return xplorInputSearchCss; }
 }, [6, "xplor-input-search", {

package/dist/components/xplor-input-select.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-const xplorInputSelectCss = "@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-input-select {\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-input-select {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-select {\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-input-select {\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-input-select {\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-input-select {\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-input-select, ul.sc-xplor-input-select {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\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-input-select {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\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-input-select {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\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-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\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-input-select:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n  display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.54);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  margin-top: 0.25rem;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 0.5rem;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n  padding: 1rem;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n  cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n  color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.6);\n}";
+const xplorInputSelectCss = "@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-input-select {\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-input-select {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-select {\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-input-select {\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-input-select {\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-input-select {\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-input-select, ul.sc-xplor-input-select {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\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-input-select {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\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-input-select {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\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-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\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-input-select:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n  display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.54);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: white;\n  border-radius: 0.5rem;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 9999;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n  padding: 1rem;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n  flex-shrink: 0;\n  width: 1.125rem;\n  height: 1.125rem;\n  cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n  color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n  color: rgba(0, 0, 0, 0.6);\n}";
 const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSelect extends H {
     constructor() {
@@ -61,6 +61,17 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         this.required = false;
         this.isOpen = false;
         this.isFocused = false;
+        this.menuPosition = null;
+        this.updateMenuPosition = () => {
+            if (this.fieldRef) {
+                const rect = this.fieldRef.getBoundingClientRect();
+                this.menuPosition = {
+                    top: rect.bottom + 4,
+                    left: rect.left,
+                    width: rect.width,
+                };
+            }
+        };
         this.handleOutsideClick = (event) => {
             if (this.selectRef && !this.selectRef.contains(event.target)) {
                 this.isOpen = false;
@@ -68,6 +79,9 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         };
         this.toggleDropdown = () => {
             if (!this.disabled && !this.readonly) {
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                }
                 this.isOpen = !this.isOpen;
             }
         };
@@ -122,10 +136,15 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '186b55603079f4fec337dc824c2e3a4776472ae6' }, h("div", { key: '07d765115aa286e8da1f13fc76f55c6c6e9008c1', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '6e1116ba611eee1673ffdb71c5bb15455afd5921', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '77cefc98c67261ebcddac9c179f01cd6615306e8', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b65e671edced0c0f1780ecdd74cc23197310a550', class: "xplor-input-select__field", onClick: this.toggleDropdown }, h("div", { key: '52e7b58288c7d4c7ad4d505ae03f75204d461f15', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '7c780d75bc62648aed641e0d4be4e4d55065099b', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("div", { key: '809f4c0254c09d61cdf597e467daf8d1f5f7667c', class: "xplor-input-select__menu" }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
+        return (h(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+                position: 'fixed',
+                top: `${this.menuPosition.top}px`,
+                left: `${this.menuPosition.left}px`,
+                width: `${this.menuPosition.width}px`,
+            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
                 'xplor-input-select__option': true,
                 'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '73f7808a7261cce5b3dc6e28e9771d9d669835d7', class: "xplor-input-select__details" }, this.error && h("div", { key: '9e934df8f33b080fd528fa99d0c5a4cb78c8f03a', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '8c0bdbc7304c433cca0d85d09c213f6ccf5f3b29', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
     }
     static get style() { return xplorInputSelectCss; }
 }, [2, "xplor-input-select", {
@@ -143,7 +162,8 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         "helperText": [1, "helper-text"],
         "required": [4],
         "isOpen": [32],
-        "isFocused": [32]
+        "isFocused": [32],
+        "menuPosition": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/xplor-input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-select.js","mappings":"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","names":["XplorInputSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-select/xplor-input-select.scss?tag=xplor-input-select&encapsulation=scoped","src/components/xplor-input-select/xplor-input-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\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 display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n\n &:hover:not(.xplor-input-select--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--open {\n .xplor-input-select__field {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .xplor-input-select__field {\n border-color: #d32f2f;\n }\n }\n\n &--disabled {\n .xplor-input-select__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-select__value {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n }\n\n &__arrow {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n }\n\n &__menu {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: 0.25rem;\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 1000;\n }\n\n &__empty {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &--selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n\n &__checkbox {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n }\n\n &__option-content {\n flex: 1;\n min-width: 0;\n }\n\n &__option-title {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__option-subtitle {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 &__helper-text {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n value: any;\n title: string;\n subtitle?: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-input-select',\n styleUrl: 'xplor-input-select.scss',\n scoped: true,\n})\nexport class XplorInputSelect {\n private selectRef: HTMLDivElement;\n\n /*\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any \| any[] = null;\n\n /\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Select...';\n\n /\n Options array\n /\n @Prop() options: SelectOption[] = [];\n\n /\n Whether multiple selection is allowed\n /\n @Prop() multiple: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the select is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the select is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether to hide validation details\n /\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n\n /\n Error message\n /\n @Prop() error: string = '';\n\n /\n Helper text\n /\n @Prop() helperText: string = '';\n\n /\n Whether the input is required\n /\n @Prop() required: boolean = false;\n\n /\n Change event\n /\n @Event() xplorChange: EventEmitter<any>;\n\n @State() isOpen: boolean = false;\n @State() isFocused: boolean = false;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n private toggleDropdown = () => {\n if (!this.disabled && !this.readonly) {\n this.isOpen = !this.isOpen;\n }\n };\n\n private handleOptionClick = (option: SelectOption) => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n const index = currentValue.findIndex((v) => v === option.value);\n\n if (index > -1) {\n this.value = currentValue.filter((_, i) => i !== index);\n } else {\n this.value = [...currentValue, option.value];\n }\n } else {\n this.value = option.value;\n this.isOpen = false;\n }\n\n this.xplorChange.emit(this.value);\n };\n\n private isSelected = (option: SelectOption): boolean => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n return currentValue.includes(option.value);\n }\n return this.value === option.value;\n };\n\n private getDisplayValue = (): string => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n if (currentValue.length === 0) return this.placeholder;\n\n const selectedOptions = this.options.filter((opt) =>\n currentValue.includes(opt.value)\n );\n return `${selectedOptions.length} selected`;\n }\n\n const selectedOption = this.options.find((opt) => opt.value === this.value);\n return selectedOption ? selectedOption.title : this.placeholder;\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-select': true,\n 'xplor-input-select--open': this.isOpen,\n 'xplor-input-select--focused': this.isFocused,\n 'xplor-input-select--disabled': this.disabled,\n 'xplor-input-select--error': !!this.error,\n };\n\n const showDetails = this.hideDetails === false \|\| (this.hideDetails === 'auto' && (this.error \|\| this.helperText));\n\n return (\n <Host>\n <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n {this.label && (\n <label class=\"xplor-input-select__label\">\n {this.label}\n {this.required && <span class=\"xplor-input-select__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown}>\n <div class=\"xplor-input-select__value\">\n {this.getDisplayValue()}\n </div>\n <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n </div>\n\n {this.isOpen && (\n <div class=\"xplor-input-select__menu\">\n {this.options.length === 0 ? (\n <div class=\"xplor-input-select__empty\">No options available</div>\n ) : (\n this.options.map((option) => (\n <div\n key={option.value}\n class={{\n 'xplor-input-select__option': true,\n 'xplor-input-select__option--selected': this.isSelected(option),\n }}\n onClick={() => this.handleOptionClick(option)}\n >\n {this.multiple && (\n <input\n type=\"checkbox\"\n class=\"xplor-input-select__checkbox\"\n checked={this.isSelected(option)}\n readOnly\n />\n )}\n <div class=\"xplor-input-select__option-content\">\n <div class=\"xplor-input-select__option-title\">{option.title}</div>\n {option.subtitle && (\n <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n )}\n </div>\n </div>\n ))\n )}\n </div>\n )}\n\n {showDetails && (\n <div class=\"xplor-input-select__details\">\n {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-select.js","mappings":"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","names":["XplorInputSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-select/xplor-input-select.scss?tag=xplor-input-select&encapsulation=scoped","src/components/xplor-input-select/xplor-input-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\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 display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n\n &:hover:not(.xplor-input-select--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--open {\n .xplor-input-select__field {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .xplor-input-select__field {\n border-color: #d32f2f;\n }\n }\n\n &--disabled {\n .xplor-input-select__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-select__value {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n }\n\n &__arrow {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n }\n\n &__menu {\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 9999;\n }\n\n &__empty {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n }\n\n &__option {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &--selected {\n background-color: rgba(0, 132, 128, 0.08);\n }\n }\n\n &__checkbox {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n }\n\n &__option-content {\n flex: 1;\n min-width: 0;\n }\n\n &__option-title {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__option-subtitle {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 &__helper-text {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n value: any;\n title: string;\n subtitle?: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-input-select',\n styleUrl: 'xplor-input-select.scss',\n scoped: true,\n})\nexport class XplorInputSelect {\n private selectRef: HTMLDivElement;\n private fieldRef: HTMLDivElement;\n\n /*\n Selected value(s)\n /\n @Prop({ mutable: true }) value: any \| any[] = null;\n\n /\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Select...';\n\n /\n Options array\n /\n @Prop() options: SelectOption[] = [];\n\n /\n Whether multiple selection is allowed\n /\n @Prop() multiple: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the select is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the select is readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether to hide validation details\n /\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n\n /\n Error message\n /\n @Prop() error: string = '';\n\n /\n Helper text\n /\n @Prop() helperText: string = '';\n\n /\n Whether the input is required\n /\n @Prop() required: boolean = false;\n\n /\n Change event\n /\n @Event() xplorChange: EventEmitter<any>;\n\n @State() isOpen: boolean = false;\n @State() isFocused: boolean = false;\n @State() menuPosition: { top: number; left: number; width: number } = null;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private updateMenuPosition = () => {\n if (this.fieldRef) {\n const rect = this.fieldRef.getBoundingClientRect();\n this.menuPosition = {\n top: rect.bottom + 4,\n left: rect.left,\n width: rect.width,\n };\n }\n };\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n private toggleDropdown = () => {\n if (!this.disabled && !this.readonly) {\n if (!this.isOpen) {\n this.updateMenuPosition();\n }\n this.isOpen = !this.isOpen;\n }\n };\n\n private handleOptionClick = (option: SelectOption) => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n const index = currentValue.findIndex((v) => v === option.value);\n\n if (index > -1) {\n this.value = currentValue.filter((_, i) => i !== index);\n } else {\n this.value = [...currentValue, option.value];\n }\n } else {\n this.value = option.value;\n this.isOpen = false;\n }\n\n this.xplorChange.emit(this.value);\n };\n\n private isSelected = (option: SelectOption): boolean => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n return currentValue.includes(option.value);\n }\n return this.value === option.value;\n };\n\n private getDisplayValue = (): string => {\n if (this.multiple) {\n const currentValue = Array.isArray(this.value) ? this.value : [];\n if (currentValue.length === 0) return this.placeholder;\n\n const selectedOptions = this.options.filter((opt) =>\n currentValue.includes(opt.value)\n );\n return `${selectedOptions.length} selected`;\n }\n\n const selectedOption = this.options.find((opt) => opt.value === this.value);\n return selectedOption ? selectedOption.title : this.placeholder;\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-select': true,\n 'xplor-input-select--open': this.isOpen,\n 'xplor-input-select--focused': this.isFocused,\n 'xplor-input-select--disabled': this.disabled,\n 'xplor-input-select--error': !!this.error,\n };\n\n const showDetails = this.hideDetails === false \|\| (this.hideDetails === 'auto' && (this.error \|\| this.helperText));\n\n return (\n <Host>\n <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n {this.label && (\n <label class=\"xplor-input-select__label\">\n {this.label}\n {this.required && <span class=\"xplor-input-select__required\"></span>}\n </label>\n )}\n\n <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown} ref={(el) => (this.fieldRef = el)}>\n <div class=\"xplor-input-select__value\">\n {this.getDisplayValue()}\n </div>\n <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n </div>\n\n {this.isOpen && this.menuPosition && (\n <div\n class=\"xplor-input-select__menu\"\n style={{\n position: 'fixed',\n top: `${this.menuPosition.top}px`,\n left: `${this.menuPosition.left}px`,\n width: `${this.menuPosition.width}px`,\n }}\n >\n {this.options.length === 0 ? (\n <div class=\"xplor-input-select__empty\">No options available</div>\n ) : (\n this.options.map((option) => (\n <div\n key={option.value}\n class={{\n 'xplor-input-select__option': true,\n 'xplor-input-select__option--selected': this.isSelected(option),\n }}\n onClick={() => this.handleOptionClick(option)}\n >\n {this.multiple && (\n <input\n type=\"checkbox\"\n class=\"xplor-input-select__checkbox\"\n checked={this.isSelected(option)}\n readOnly\n />\n )}\n <div class=\"xplor-input-select__option-content\">\n <div class=\"xplor-input-select__option-title\">{option.title}</div>\n {option.subtitle && (\n <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n )}\n </div>\n </div>\n ))\n )}\n </div>\n )}\n\n {showDetails && (\n <div class=\"xplor-input-select__details\">\n {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-input-send.js CHANGED Viewed

@@ -44,10 +44,10 @@ const XplorInputSend$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSend e
         this.internalValue = this.value;
     }
     render() {
-        return (h(Host, { key: 'bbf2f299e9c78afed930b178f67494f3c9171ca0' }, h("div", { key: 'a9e29fbc660b5fcc9ad5e8c0a543d39b39073cf9', class: {
+        return (h(Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, h("input", { key: '645f813fd6aad4905635c392afd87ead717bd3d4', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '0c5ea75208baea586babbd9ecfa8a433da65e2be', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, h("input", { key: '93aca7121d132bb72d812db77f8ff85be31a00aa', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
     static get style() { return xplorInputSendCss; }
 }, [2, "xplor-input-send", {

package/dist/components/xplor-input-text-area.js CHANGED Viewed

@@ -87,9 +87,9 @@ const XplorInputTextArea$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTe
         };
         const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '1acbd7f541a1673ead7718eba34c514ffdc7057c' }, h("div", { key: 'e7e9c3964c63d585b1837362da89720f353a7b7d', class: containerClasses }, this.label && (h("label", { key: '4313a150717b50a08d82179292e1b3eb38c53821', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '96ecf54bf62d2f519c72f48e7698683eb9b2c869', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '36317993f4045d9dc86cf85e67cf7fd2a0e663c2', class: "xplor-input-text-area__field" }, h("textarea", { key: '9c98044198dae93a6a46fcbc26239208203befc1', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, h("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (h("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, h("textarea", { key: 'e05d3c094930b2993b5c959b1dfce569ad1b01d0', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), showClearButton && (h("button", { key: '8495d86ff604f538cb7b2144eea778dafc414a74', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'd51398eb122563ced96d1e92d381740a6cb484d2', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '83d436bf141d4f4594f5c1dfeae9ab3de7ac4301', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'db6c99c12fc9197785b10b8703d81fdb21488934', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
+            } }), showClearButton && (h("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && h("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '0eb05a84b610b3971e76cbd5f566f32ba260eacb', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
     }
     static get style() { return xplorInputTextAreaCss; }
 }, [2, "xplor-input-text-area", {

package/dist/components/xplor-input-text-secondary.js CHANGED Viewed

@@ -51,9 +51,9 @@ const XplorInputTextSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorIn
             'input-secondary--dirty': this.isDirty,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'd7b5a95dba54e640b3bc0fb0e5e5ad07d209f21c' }, h("div", { key: 'dc0cc65fb5f74f8ed8f173c0736899afb5201ad1', class: containerClasses }, this.label && (h("label", { key: '328c402c4e0a05252ea0dd965c7b274c06e99864', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '6c4217b11971405df02ee5a7a07ece655860cabf', class: "input-secondary__required" }, "*"))), h("div", { key: '30179854ac1c1eaa8a6c3f39cdf7a0fff4c45103', class: "input-secondary__field" }, h("input", { key: 'ddb142835cf10d39fea9ff1b2023ed0cad968f9f', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, h("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (h("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), h("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, h("input", { key: '146cf2b3413de110e7aaadd19fc8da7bb824af4a', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: 'a2a0a03935964ba65591508ec50081323ac2c33a', name: "append-inner" })), showDetails && (h("div", { key: 'f3b0025dbaaf4a6bbbef5d1f0edd5866e0e79267', class: "input-secondary__details" }, this.error && h("div", { key: '91835745a04b17003b3c2254c6a5c405d36f3b08', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '96948fed46bb7765699a57c1017d0dbe3c4e2ec7', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: 'e0ef7c8cea7a11cc05636e3d020737957fc49040', name: "append" }))));
+            } }), h("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (h("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && h("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: '8dfc77b85e9d89c8c3fdbae4569e7b1ddc6ccb0d', name: "append" }))));
     }
     static get style() { return xplorInputTextSecondaryCss; }
 }, [6, "xplor-input-text-secondary", {

package/dist/components/xplor-input-text.js CHANGED Viewed

@@ -86,9 +86,9 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, h("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (h("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), h("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, h("input", { key: '41c1c60d8dbdea750477a17d32b110ef826e73a6', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', name: "append" }))));
+            } }), h("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (h("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && h("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: 'c10099eb2c41e38cc65170a5acb6897b949b8173', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
 }, [6, "xplor-input-text", {

package/dist/components/xplor-input-title.js CHANGED Viewed

@@ -36,7 +36,7 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
         };
     }
     render() {
-        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+        return (h(Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, h("input", { key: '0b79c0e500edcbd89a1e6f7bf4e1ea1b584b7a3e', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get style() { return xplorInputTitleCss; }
 }, [2, "xplor-input-title", {

package/dist/components/xplor-links.js CHANGED Viewed

@@ -9,7 +9,7 @@ const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, h("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, h("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, h("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '74b69e6d9f0d99b8653704e9fac32fa4ce50f211', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'c8e457f3529ad8340c84d5bad80431b3c42318c8', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, h("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, h("img", { key: 'ecea3e92117d535dbd3c97d0868d5888c61a3b26', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, h("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
 }, [1, "xplor-links", {

package/dist/components/xplor-modal-persistent.js CHANGED Viewed

@@ -28,7 +28,7 @@ const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModal
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
     }
 }, [4, "xplor-modal-persistent", {
         "open": [4],

package/dist/components/xplor-radio-btn.d.ts ADDED Viewed

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

package/dist/components/xplor-radio-btn.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\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    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\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 {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\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 {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\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 {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\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 .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\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:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}";
+const XplorRadioBtn$1 = /*@__PURE__*/ proxyCustomElement(class XplorRadioBtn extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+    }
+    static get style() { return xplorRadioBtnCss; }
+}, [1, "xplor-radio-btn"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-radio-btn"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-radio-btn":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorRadioBtn$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const XplorRadioBtn = XplorRadioBtn$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorRadioBtn, defineCustomElement };
+//# sourceMappingURL=xplor-radio-btn.js.map
+//# sourceMappingURL=xplor-radio-btn.js.map