npm - @xplor-education/core-stencil-components - Versions diffs - 3.1.2 → 3.1.3 - Mend

@xplor-education/core-stencil-components 3.1.2 → 3.1.3

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

package/dist/components/xplor-canvas-editor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-canvas-editor.js","mappings":"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","names":["XplorCanvasEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-canvas-editor/xplor-canvas-editor.scss?tag=xplor-canvas-editor&encapsulation=scoped","src/components/xplor-canvas-editor/xplor-canvas-editor.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n@use '../../styles/mixins.scss' as mixins;\n\n// ---------------------------------------------------------------------------\n// CSS custom properties — all overridable by the consumer\n// ---------------------------------------------------------------------------\n\n:host {\n display: block;\n\n --canvas-bg: var(--color-surface, #ffffff);\n --canvas-border: var(--color-gray-200, #{colours.$gray-200});\n --canvas-border-radius: 0.75rem;\n --canvas-toolbar-bg: var(--color-gray-50, #{colours.$gray-50});\n --canvas-toolbar-border: var(--color-gray-200, #{colours.$gray-200});\n\n --handle-size: 5; // used as SVG r= attribute value (unitless)\n --handle-fill: #ffffff;\n --handle-stroke: var(--color-primary-500, #{colours.$primary-500});\n\n --selection-color: var(--color-primary-500, #{colours.$primary-500});\n\n --canvas-btn-size: 2rem;\n --canvas-btn-color: var(--color-gray-600, #{colours.$gray-600});\n --canvas-btn-active-bg: var(--color-primary-50, #{colours.$primary-50});\n --canvas-btn-active-color: var(--color-primary-500, #{colours.$primary-500});\n --canvas-btn-hover-bg: var(--color-gray-100, #{colours.$gray-100});\n --canvas-btn-danger-color: var(--color-error-600, #{colours.$error-600});\n --canvas-btn-danger-hover-bg: var(--color-error-50, #fef2f2);\n}\n\n// ---------------------------------------------------------------------------\n// Screen-reader-only utility\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n// ---------------------------------------------------------------------------\n// Outer wrapper\n// ---------------------------------------------------------------------------\n\n.xplor-canvas {\n display: inline-flex;\n flex-direction: column;\n border: 1px solid var(--canvas-border);\n border-radius: var(--canvas-border-radius);\n background-color: var(--canvas-bg);\n overflow: hidden;\n outline: none;\n position: relative;\n\n // Keyboard focus ring\n &:focus-visible {\n outline: 2px solid var(--selection-color);\n outline-offset: 2px;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Toolbar\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__toolbar {\n display: flex;\n align-items: center;\n gap: spacing.$spacing-4;\n padding: spacing.$spacing-4 spacing.$spacing-8;\n background-color: var(--canvas-toolbar-bg);\n border-bottom: 1px solid var(--canvas-toolbar-border);\n flex-shrink: 0;\n}\n\n.xplor-canvas__toolbar-group {\n display: flex;\n align-items: center;\n gap: spacing.$spacing-4;\n}\n\n.xplor-canvas__toolbar-divider {\n width: 1px;\n height: 1.5rem;\n background-color: var(--canvas-toolbar-border);\n margin: 0 spacing.$spacing-4;\n flex-shrink: 0;\n}\n\n.xplor-canvas__toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--canvas-btn-size);\n height: var(--canvas-btn-size);\n border: none;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--canvas-btn-color);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n padding: 0;\n flex-shrink: 0;\n\n svg {\n pointer-events: none;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--canvas-btn-hover-bg);\n }\n\n &:focus-visible {\n outline: 2px solid var(--selection-color);\n outline-offset: 1px;\n }\n\n // Active / pressed tool\n &--active {\n background-color: var(--canvas-btn-active-bg);\n color: var(--canvas-btn-active-color);\n }\n\n // Danger (delete selected — only when enabled)\n &--danger {\n color: var(--canvas-btn-danger-color);\n\n &:hover:not(:disabled) {\n background-color: var(--canvas-btn-danger-hover-bg);\n }\n }\n\n // Disabled\n &:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n}\n\n// ---------------------------------------------------------------------------\n// SVG wrapper + canvas\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__svg-wrapper {\n overflow: auto;\n flex: 1 1 auto;\n line-height: 0; // remove inline-block gap\n}\n\n.xplor-canvas__svg {\n display: block;\n background-color: var(--canvas-bg);\n user-select: none;\n -webkit-user-select: none;\n\n // Crosshair applied inline via style binding;\n // default cursor is set here as a fallback\n cursor: default;\n}\n\n// ---------------------------------------------------------------------------\n// Background rect (transparent hit area)\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__bg {\n fill: transparent;\n}\n\n// ---------------------------------------------------------------------------\n// Shapes\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__shape {\n transition: opacity 0.1s ease;\n\n // Hover emphasis in select mode (selector applied via JS style prop too)\n &:hover {\n opacity: 0.85;\n }\n\n // Selected state — fill with a subtle tint; actual dashed outline is the overlay\n &--selected {\n opacity: 1;\n }\n\n // In-progress draft\n &--draft {\n pointer-events: none;\n opacity: 0.7;\n stroke-dasharray: 4, 3;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Selection overlay (dashed border, pointer-events: none via inline style)\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__selection-overlay {\n // Appearance is set inline (stroke, stroke-dasharray) to keep SVG valid\n pointer-events: none;\n}\n\n// ---------------------------------------------------------------------------\n// Resize handles\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__handle {\n fill: var(--handle-fill, #ffffff);\n stroke: var(--handle-stroke, #{colours.$primary-500});\n stroke-width: 2;\n transition: fill 0.1s ease, transform 0.1s ease;\n\n &:hover {\n fill: var(--handle-stroke, #{colours.$primary-500});\n transform-origin: center;\n transform: scale(1.3);\n }\n\n &:focus-visible {\n outline: 2px solid var(--selection-color);\n outline-offset: 2px;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode tokens\n// ---------------------------------------------------------------------------\n\n:host(.dark),\n.dark :host {\n --canvas-bg: var(--color-surface-dark, #1e1e2e);\n --canvas-border: var(--color-gray-700, #{colours.$gray-700});\n --canvas-toolbar-bg: var(--color-gray-800, #{colours.$gray-800});\n --canvas-toolbar-border: var(--color-gray-700, #{colours.$gray-700});\n --canvas-btn-color: var(--color-gray-300, #{colours.$gray-300});\n --canvas-btn-hover-bg: var(--color-gray-700, #{colours.$gray-700});\n --canvas-btn-active-bg: rgba(33, 150, 243, 0.2);\n --canvas-btn-active-color: var(--color-primary-300, #{colours.$primary-300});\n --handle-fill: #1e1e2e;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n} from '@stencil/core';\n\n// ---------------------------------------------------------------------------\n// Shape interface\n// ---------------------------------------------------------------------------\n\nexport interface Shape {\n id: string;\n type: 'rect' | 'circle' | 'line';\n x: number;\n y: number;\n width: number;\n height: number;\n fill: string;\n stroke: string;\n}\n\nlet canvasIdCounter = 0;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@Component({\n tag: 'xplor-canvas-editor',\n styleUrl: 'xplor-canvas-editor.scss',\n scoped: true,\n})\nexport class XplorCanvasEditor {\n // -------------------------------------------------------------------------\n // Internal refs & IDs\n // -------------------------------------------------------------------------\n\n @Element() el: HTMLElement;\n\n private readonly componentId = `xplor-canvas-${++canvasIdCounter}`;\n private svgEl!: SVGSVGElement;\n\n // Drawing state (non-reactive, no need to trigger re-render)\n private isDrawing = false;\n private drawStart: { x: number; y: number } | null = null;\n\n // Resize state\n private isResizing = false;\n private resizeHandle: string | null = null;\n private resizeStart: { x: number; y: number; shape: Shape } | null = null;\n\n // -------------------------------------------------------------------------\n // Props\n // -------------------------------------------------------------------------\n\n /** Width of the SVG canvas in pixels */\n @Prop() width: number = 800;\n\n /** Height of the SVG canvas in pixels */\n @Prop() height: number = 500;\n\n /**\n * Initially active tool. The consumer can switch tool programmatically by\n * updating this prop; the internal `activeTool` state takes over once the\n * component mounts.\n */\n @Prop() tool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n\n // -------------------------------------------------------------------------\n // State\n // -------------------------------------------------------------------------\n\n @State() private shapes: Shape[] = [];\n @State() private selectedId: string | null = null;\n @State() private activeTool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n @State() private draftShape: Shape | null = null;\n\n // -------------------------------------------------------------------------\n // Events\n // -------------------------------------------------------------------------\n\n /** Emitted when a new shape is committed to the canvas */\n @Event() xplorShapeAdd: EventEmitter<Shape>;\n\n /** Emitted when a shape is removed; payload is the shape id */\n @Event() xplorShapeRemove: EventEmitter<string>;\n\n /** Emitted when a shape's bounds are updated via resize */\n @Event() xplorShapeChange: EventEmitter<Shape>;\n\n // -------------------------------------------------------------------------\n // Lifecycle\n // -------------------------------------------------------------------------\n\n componentWillLoad() {\n this.activeTool = this.tool;\n }\n\n // -------------------------------------------------------------------------\n // Public methods\n // -------------------------------------------------------------------------\n\n /** Removes all shapes and clears the selection */\n @Method()\n async clearAll(): Promise<void> {\n this.shapes = [];\n this.selectedId = null;\n }\n\n /** Returns a shallow copy of all current shapes */\n @Method()\n async getShapes(): Promise<Shape[]> {\n return [...this.shapes];\n }\n\n // -------------------------------------------------------------------------\n // Private: Utilities\n // -------------------------------------------------------------------------\n\n private generateId(): string {\n return `shape-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n private getSvgPoint(event: MouseEvent): { x: number; y: number } {\n const rect = this.svgEl.getBoundingClientRect();\n return {\n x: Math.max(0, Math.min(this.width, event.clientX - rect.left)),\n y: Math.max(0, Math.min(this.height, event.clientY - rect.top)),\n };\n }\n\n private setActiveTool(tool: 'select' | 'rect' | 'circle' | 'line') {\n this.activeTool = tool;\n this.draftShape = null;\n this.isDrawing = false;\n }\n\n private deleteSelected() {\n if (!this.selectedId) return;\n const id = this.selectedId;\n this.shapes = this.shapes.filter(s => s.id !== id);\n this.selectedId = null;\n this.xplorShapeRemove.emit(id);\n }\n\n // -------------------------------------------------------------------------\n // Private: Drawing handlers (SVG events)\n // -------------------------------------------------------------------------\n\n private onSvgMouseDown = (event: MouseEvent) => {\n // Only draw if target is the SVG itself or the background rect\n const target = event.target as SVGElement;\n const isBackground =\n target === this.svgEl ||\n target.classList.contains('xplor-canvas__bg');\n\n if (this.activeTool === 'select') {\n // Clicking background clears selection\n if (isBackground) {\n this.selectedId = null;\n }\n return;\n }\n\n if (!isBackground) return;\n\n const point = this.getSvgPoint(event);\n this.isDrawing = true;\n this.drawStart = point;\n\n this.draftShape = {\n id: '__draft__',\n type: this.activeTool as 'rect' | 'circle' | 'line',\n x: point.x,\n y: point.y,\n width: 0,\n height: 0,\n fill: 'rgba(33, 150, 243, 0.15)',\n stroke: '#2196f3',\n };\n\n event.preventDefault();\n };\n\n private onSvgMouseMove = (event: MouseEvent) => {\n if (!this.isDrawing || !this.drawStart || !this.draftShape) return;\n\n const point = this.getSvgPoint(event);\n const x = Math.min(point.x, this.drawStart.x);\n const y = Math.min(point.y, this.drawStart.y);\n const width = Math.abs(point.x - this.drawStart.x);\n const height = Math.abs(point.y - this.drawStart.y);\n\n // Spread to a new object to trigger re-render\n this.draftShape = { ...this.draftShape, x, y, width, height };\n };\n\n private onSvgMouseUp = (_event: MouseEvent) => {\n if (!this.isDrawing || !this.draftShape) {\n this.isDrawing = false;\n return;\n }\n\n this.isDrawing = false;\n\n // Discard draws smaller than 5 px in either dimension\n if (this.draftShape.width < 5 || this.draftShape.height < 5) {\n this.draftShape = null;\n this.drawStart = null;\n return;\n }\n\n const newShape: Shape = {\n ...this.draftShape,\n id: this.generateId(),\n fill: 'rgba(33, 150, 243, 0.25)',\n stroke: '#1976d2',\n };\n\n this.shapes = [...this.shapes, newShape];\n this.draftShape = null;\n this.drawStart = null;\n this.xplorShapeAdd.emit(newShape);\n };\n\n private onShapeClick = (event: MouseEvent, shape: Shape) => {\n if (this.activeTool !== 'select') return;\n event.stopPropagation();\n this.selectedId = shape.id;\n };\n\n // -------------------------------------------------------------------------\n // Private: Resize handlers\n // -------------------------------------------------------------------------\n\n private onResizeHandleMouseDown = (event: MouseEvent, handleName: string) => {\n event.stopPropagation();\n event.preventDefault();\n\n const selectedShape = this.shapes.find(s => s.id === this.selectedId);\n if (!selectedShape) return;\n\n const point = this.getSvgPoint(event);\n this.isResizing = true;\n this.resizeHandle = handleName;\n this.resizeStart = { x: point.x, y: point.y, shape: { ...selectedShape } };\n\n const onMouseMove = (e: MouseEvent) => this.onResizeMouseMove(e);\n const onMouseUp = (e: MouseEvent) => {\n this.onResizeMouseUp(e);\n window.removeEventListener('mousemove', onMouseMove);\n window.removeEventListener('mouseup', onMouseUp);\n };\n\n window.addEventListener('mousemove', onMouseMove);\n window.addEventListener('mouseup', onMouseUp);\n };\n\n private onResizeMouseMove = (event: MouseEvent) => {\n if (!this.isResizing || !this.resizeStart || !this.resizeHandle) return;\n\n const point = this.getSvgPoint(event);\n const dx = point.x - this.resizeStart.x;\n const dy = point.y - this.resizeStart.y;\n const orig = this.resizeStart.shape;\n const MIN = 10;\n\n let { x, y, width, height } = orig;\n\n if (this.resizeHandle.includes('e')) {\n width = Math.max(MIN, orig.width + dx);\n }\n if (this.resizeHandle.includes('w')) {\n const newWidth = Math.max(MIN, orig.width - dx);\n x = orig.x + (orig.width - newWidth);\n width = newWidth;\n }\n if (this.resizeHandle.includes('s')) {\n height = Math.max(MIN, orig.height + dy);\n }\n if (this.resizeHandle.includes('n')) {\n const newHeight = Math.max(MIN, orig.height - dy);\n y = orig.y + (orig.height - newHeight);\n height = newHeight;\n }\n\n this.shapes = this.shapes.map(s =>\n s.id === this.selectedId ? { ...s, x, y, width, height } : s,\n );\n };\n\n private onResizeMouseUp = (_event: MouseEvent) => {\n if (!this.isResizing) return;\n this.isResizing = false;\n this.resizeHandle = null;\n this.resizeStart = null;\n\n const updatedShape = this.shapes.find(s => s.id === this.selectedId);\n if (updatedShape) {\n this.xplorShapeChange.emit({ ...updatedShape });\n }\n };\n\n // -------------------------------------------------------------------------\n // Private: Keyboard handler (on the wrapper div)\n // -------------------------------------------------------------------------\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Delete' || event.key === 'Backspace') {\n event.preventDefault();\n this.deleteSelected();\n }\n };\n\n // -------------------------------------------------------------------------\n // Private: SVG render helpers\n // -------------------------------------------------------------------------\n\n private renderShape(shape: Shape, isDraft = false) {\n const isSelected = !isDraft && shape.id === this.selectedId;\n\n const commonProps = {\n class: {\n 'xplor-canvas__shape': true,\n 'xplor-canvas__shape--selected': isSelected,\n 'xplor-canvas__shape--draft': isDraft,\n },\n fill: shape.fill,\n stroke: shape.stroke,\n 'stroke-width': '2',\n style: {\n cursor:\n this.activeTool === 'select' && !isDraft ? 'pointer' : 'default',\n },\n onClick: !isDraft\n ? (e: MouseEvent) => this.onShapeClick(e, shape)\n : undefined,\n };\n\n if (shape.type === 'rect') {\n return (\n <rect\n {...commonProps}\n x={shape.x}\n y={shape.y}\n width={shape.width}\n height={shape.height}\n rx=\"2\"\n />\n );\n }\n\n if (shape.type === 'circle') {\n return (\n <ellipse\n {...commonProps}\n cx={shape.x + shape.width / 2}\n cy={shape.y + shape.height / 2}\n rx={shape.width / 2}\n ry={shape.height / 2}\n />\n );\n }\n\n if (shape.type === 'line') {\n return (\n <line\n {...commonProps}\n x1={shape.x}\n y1={shape.y}\n x2={shape.x + shape.width}\n y2={shape.y + shape.height}\n fill=\"none\"\n />\n );\n }\n\n return null;\n }\n\n private renderSelectionOverlay(shape: Shape) {\n const overlayProps = {\n class: 'xplor-canvas__selection-overlay',\n stroke: 'var(--selection-color, #2196f3)',\n 'stroke-dasharray': '5,3',\n 'stroke-width': '2',\n fill: 'none',\n style: { pointerEvents: 'none' as any },\n };\n\n if (shape.type === 'line') {\n return (\n <line\n {...overlayProps}\n x1={shape.x}\n y1={shape.y}\n x2={shape.x + shape.width}\n y2={shape.y + shape.height}\n />\n );\n }\n\n if (shape.type === 'circle') {\n return (\n <ellipse\n {...overlayProps}\n cx={shape.x + shape.width / 2}\n cy={shape.y + shape.height / 2}\n rx={shape.width / 2}\n ry={shape.height / 2}\n />\n );\n }\n\n // rect (default)\n return (\n <rect\n {...overlayProps}\n x={shape.x}\n y={shape.y}\n width={shape.width}\n height={shape.height}\n rx=\"2\"\n />\n );\n }\n\n private renderResizeHandles(shape: Shape) {\n const { x, y, width, height } = shape;\n const mx = x + width / 2;\n const my = y + height / 2;\n\n const handles: Array<{ name: string; cx: number; cy: number; cursor: string }> = [\n { name: 'nw', cx: x, cy: y, cursor: 'nwse-resize' },\n { name: 'n', cx: mx, cy: y, cursor: 'ns-resize' },\n { name: 'ne', cx: x + width, cy: y, cursor: 'nesw-resize' },\n { name: 'e', cx: x + width, cy: my, cursor: 'ew-resize' },\n { name: 'se', cx: x + width, cy: y + height, cursor: 'nwse-resize' },\n { name: 's', cx: mx, cy: y + height, cursor: 'ns-resize' },\n { name: 'sw', cx: x, cy: y + height, cursor: 'nesw-resize' },\n { name: 'w', cx: x, cy: my, cursor: 'ew-resize' },\n ];\n\n return handles.map(h => (\n <circle\n key={h.name}\n class=\"xplor-canvas__handle\"\n cx={h.cx}\n cy={h.cy}\n r=\"var(--handle-size, 5)\"\n style={{ cursor: h.cursor }}\n onMouseDown={(e: MouseEvent) => this.onResizeHandleMouseDown(e, h.name)}\n aria-label={`Resize ${h.name.toUpperCase()} handle`}\n role=\"button\"\n />\n ));\n }\n\n // -------------------------------------------------------------------------\n // Private: Toolbar render\n // -------------------------------------------------------------------------\n\n private renderToolbar() {\n const tools: Array<{\n id: 'select' | 'rect' | 'circle' | 'line';\n label: string;\n icon: any;\n }> = [\n {\n id: 'select',\n label: 'Select tool',\n icon: (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M4 0 L20 12 L12.5 14.5 L10 24 Z\" />\n </svg>\n ),\n },\n {\n id: 'rect',\n label: 'Rectangle tool',\n icon: (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\" />\n </svg>\n ),\n },\n {\n id: 'circle',\n label: 'Circle / Ellipse tool',\n icon: (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"9\" />\n </svg>\n ),\n },\n {\n id: 'line',\n label: 'Line tool',\n icon: (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"3\" />\n </svg>\n ),\n },\n ];\n\n return (\n <div\n class=\"xplor-canvas__toolbar\"\n role=\"toolbar\"\n aria-label=\"Canvas drawing tools\"\n id={`${this.componentId}-toolbar`}\n >\n {/* Drawing tool buttons */}\n <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Drawing tools\">\n {tools.map(t => (\n <button\n type=\"button\"\n key={t.id}\n class={{\n 'xplor-canvas__toolbar-btn': true,\n 'xplor-canvas__toolbar-btn--active': this.activeTool === t.id,\n }}\n aria-label={t.label}\n aria-pressed={String(this.activeTool === t.id)}\n title={t.label}\n onClick={() => this.setActiveTool(t.id)}\n >\n {t.icon}\n </button>\n ))}\n </div>\n\n <div class=\"xplor-canvas__toolbar-divider\" aria-hidden=\"true\" />\n\n {/* Action buttons */}\n <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Canvas actions\">\n <button\n type=\"button\"\n class={{\n 'xplor-canvas__toolbar-btn': true,\n 'xplor-canvas__toolbar-btn--danger': !!this.selectedId,\n }}\n aria-label=\"Delete selected shape\"\n title=\"Delete selected (Del)\"\n disabled={!this.selectedId}\n onClick={() => this.deleteSelected()}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n class=\"xplor-canvas__toolbar-btn\"\n aria-label=\"Clear all shapes\"\n title=\"Clear all\"\n onClick={() => this.clearAll()}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z\" />\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\n // -------------------------------------------------------------------------\n // Render\n // -------------------------------------------------------------------------\n\n render() {\n const selectedShape = this.selectedId\n ? this.shapes.find(s => s.id === this.selectedId)\n : null;\n\n const svgCursor =\n this.activeTool !== 'select' ? 'crosshair' : 'default';\n\n return (\n <Host>\n <div\n class=\"xplor-canvas\"\n role=\"application\"\n aria-label=\"Canvas editor\"\n aria-describedby={`${this.componentId}-desc`}\n tabIndex={0}\n onKeyDown={this.onKeyDown}\n >\n {/* Visually hidden description for screen readers */}\n <span id={`${this.componentId}-desc`} class=\"xplor-canvas__sr-only\">\n Interactive canvas editor. Use toolbar to select a drawing tool, then\n click and drag on the canvas to draw shapes. Press Delete to remove a\n selected shape.\n </span>\n\n {this.renderToolbar()}\n\n <div class=\"xplor-canvas__svg-wrapper\">\n <svg\n ref={el => (this.svgEl = el as SVGSVGElement)}\n class=\"xplor-canvas__svg\"\n width={this.width}\n height={this.height}\n style={{ cursor: svgCursor }}\n aria-label={`Drawing canvas, ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}`}\n role=\"img\"\n onMouseDown={this.onSvgMouseDown}\n onMouseMove={this.onSvgMouseMove}\n onMouseUp={this.onSvgMouseUp}\n >\n {/* Transparent background rect — captures click/mousedown on empty area */}\n <rect\n class=\"xplor-canvas__bg\"\n x=\"0\"\n y=\"0\"\n width={this.width}\n height={this.height}\n fill=\"transparent\"\n />\n\n {/* Committed shapes */}\n {this.shapes.map(shape => this.renderShape(shape))}\n\n {/* Selection overlay (dashed outline) */}\n {selectedShape && this.renderSelectionOverlay(selectedShape)}\n\n {/* Resize handles */}\n {selectedShape &&\n this.activeTool === 'select' &&\n this.renderResizeHandles(selectedShape)}\n\n {/* In-progress draft shape */}\n {this.draftShape && this.renderShape(this.draftShape, true)}\n </svg>\n </div>\n\n {/* Live region for screen reader announcements */}\n <div\n class=\"xplor-canvas__sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {this.shapes.length > 0\n ? `Canvas contains ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}.`\n : 'Canvas is empty.'}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-chat-widget.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-B5rS_jjI.js';
-import { d as defineCustomElement$2 } from './p-J41B2nOt.js';
+import { d as defineCustomElement$3 } from './p-DWaTb2EJ.js';
+import { d as defineCustomElement$2 } from './p-DroQBoSo.js';
 const xplorChatWidgetCss = "/* 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}\n\n.container {\n  display: flex;\n  margin-top: 20px;\n}";
@@ -60,7 +60,7 @@ const XplorChatWidget$1 = /*@__PURE__*/ proxyCustomElement(class XplorChatWidget
         }
     }
     render() {
-        return (h(Host, { key: '19fe2c1cbe9c2f82779a3e9e6966db8e22988002' }, h("div", { key: 'b2d611ff824b3e4c9eff2c7eac45716219de2b96', id: "ai-text" }, this.textValue), h("div", { key: '96ca4702ebd751d3b6ab95a23ca1b762ef1be270', class: "container" }, h("xplor-dropdown", { key: '74a7468be12b73d97cf473cd7bb9bae99e62fa1b', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: '4177a337e0295507422bee77f90a26ea6ed3b12b', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
+        return (h(Host, { key: '5d2dcc41806f640f3dce9dea7aefe60877115b6c' }, h("div", { key: '3624422b51c11f58fa35249e91ab3a5a4ae70cd1', id: "ai-text" }, this.textValue), h("div", { key: 'ba23a8071db26f0695fbfc75a740b9e816c72eac', class: "container" }, h("xplor-dropdown", { key: 'b944f0a90ac707f98bc3ed75736823572d0f77e5', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: 'e9d9b16969b7da1cb1160a7f6c9c77b932da8834', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
     }
     get host() { return this; }
     static get style() { return xplorChatWidgetCss; }

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

@@ -81,7 +81,7 @@ const XplorCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCheckbox ext
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, h("div", { key: '1d1024d0dfb9328d607919dad86bfa25def7bf35', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '19da038d854b218177b668da5b8e8c3489dd377d', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
+        return (h("div", { key: '1fe78163ff3fc8d337731e9765628f2dd48bbbb5', class: "checkbox-wrapper" }, h("div", { key: '0ed33fa8c645b4ddce726b991f40da8712758a71', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: '75bd98168be72bf08998da1058aefe6fe9c46947', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ddfb568863af95b55ca70df1ba3dd8be5a3d30cb', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '1eadbf511badc60a60a5419c010c0c9b09014e22', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'b654b703226b817484375a9b7d008feb44c8f592', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '1e53eb3e690f18f983d1cdded64fe9e8b557e5c8', class: "label", id: this.labelId }, this.label)));
     }
     static get watchers() { return {
         "initialChecked": ["watchCheckedProp"],

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

@@ -220,15 +220,15 @@ const XplorCombobox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCombobox ext
         const listboxId = 'combobox-listbox';
         const labelId = 'combobox-label';
         const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;
-        return (h(Host, { key: '5c3fb39153fe1a83d72b4ad3aa60d4602014916c' }, h("div", { key: 'ed9f80ab76d19c842e9da6a016040fdf68395332', class: {
+        return (h(Host, { key: '30d75fafd92568e91b4f695fa48d06fe2c433c40' }, h("div", { key: 'b8c6278923ff28cd85adaf793d8a9c36bc812370', class: {
                 'combobox': true,
                 'combobox--disabled': this.disabled,
                 'combobox--readonly': this.readonly,
                 'combobox--open': this.isOpen,
-            } }, this.label && (h("label", { key: 'a5837bdc2fe30046a56a659a942c82c6612e5eed', class: "combobox__label", id: labelId }, this.label)), h("div", { key: '84022a8390a2024ef29d7dbdb5bd3b34c1da2305', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: '7df2befc1d6104e8b5472c800fe30eda0ecac550', class: "combobox__chips" }, this.selectedItems.map(value => {
+            } }, this.label && (h("label", { key: 'b8c250d88bf3fefc0b83232e3f93123034e43149', class: "combobox__label", id: labelId }, this.label)), h("div", { key: 'b0c00a90810d030afc86f815b4f90bc259841885', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: '50d4ea9a7798b65d6bc52466b458f022358d881a', class: "combobox__chips" }, this.selectedItems.map(value => {
             const chipLabel = this.getSelectedItemLabel(value);
             return (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, chipLabel), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
-        }))), h("input", { key: '4b01ffb37bfe750c24081ec839fcd6b70f87bde0', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), h("div", { key: 'f1fa0b56edeb6c5e25eebd34a9d143a0ecca1173', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '5179310582b9aef4739985dbeefd35bda1bb86bb', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), h("span", { key: '93c5431addfcaf88e51d38907304a4e289c3183d', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: '9fba0e29de90f8bdcdd4861fbb0fb06a20fa980b', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
+        }))), h("input", { key: '5fb92aa47a90ce22bc6538b267ab5ebc228ef38c', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), h("div", { key: '4ade4fece05a81bc1ac4a0a289beecd6a2068f8c', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '8ee876b5e4a35fd0b0af71544bbc2e98a29148fd', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), h("span", { key: 'ca1e3180e381b5fe1ace789b0af66092cd9dfeee', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: 'cb5501119e5aa39e161de50b1ac6b310dc1edaa3', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
             const isSelected = this.multiple
                 ? this.selectedItems.includes(item.value)
                 : this.value === item.value;
@@ -238,11 +238,11 @@ const XplorCombobox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCombobox ext
                     'combobox__item--selected': isSelected,
                     'combobox__item--disabled': item.disabled,
                 }, onClick: () => this.selectItem(item) }, item.label));
-        }), showCreateOption && (h("div", { key: '880bc30bc32c87dfb9ecf9b706162299e80fd1c5', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
+        }), showCreateOption && (h("div", { key: 'dddf029e093efa939b5f40b63101c548e11eb654', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
                 'combobox__item': true,
                 'combobox__item--create': true,
                 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
-            }, onClick: () => this.createNewItem() }, h("span", { key: 'd0ff5841add7495a79a1e9453b87706971cf8907', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e1b1e94a5afce2ab3f5a714a7c593e59d9d22ff0' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: '0a95426511036f918cd42999cd1543fc26efbff2', class: "combobox__dropdown", role: "listbox", id: listboxId }, h("div", { key: '551dc3ad968c049c5bbf2a9da71d45e203e15df7', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
+            }, onClick: () => this.createNewItem() }, h("span", { key: '478d841838f5b2249f868d5852982bede08fe3de', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: '05c284c7d27f7107dfc717c5c2376077c627d4c7' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: 'c333a2909fef4d33e8b1655043340ba4f27d898e', class: "combobox__dropdown", role: "listbox", id: listboxId }, h("div", { key: '1ba3213f34a8f281143e6ead11fc0c90844475fc', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     get el() { return this; }
     static get style() { return xplorComboboxCss; }

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

@@ -173,13 +173,13 @@ const XplorDatatable$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatatable e
     render() {
         const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;
         const hasHeight = !!this.height;
-        return (h(Host, { key: '779f32a211bb2d9d5d70363112970f00d62d9ccf', class: "xplor-datatable" }, h("div", { key: '27995dd2f98074fe0bd223b52ae3b25cc48a8ab6', class: "datatable-container" }, h("div", { key: '379d7b6999df3d94e2fa6618394e14fa9e99d96b', class: {
+        return (h(Host, { key: '31026bbaf1331e11115147771e80fb3d59c02104', class: "xplor-datatable" }, h("div", { key: '6b4feed4000f1cc56bf2ed2e7bb6808996662ca9', class: "datatable-container" }, h("div", { key: '2d395becc036e9e19f3b9397fbf154edf07f36e4', class: {
                 'table-wrapper': true,
                 'has-height': hasHeight,
                 'horizontal-lines': this.horizontalLines,
                 'striped': this.striped,
                 'is-empty': this.items.length === 0,
-            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, h("input", { key: '668128d3f8238449b965df2825e164a2e12a4626', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
+            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: 'fdf0bf570246d6abd84dfa2e2cf5757dde309e6c', class: { 'hover': this.hover } }, h("thead", { key: '634480ba84300e86339dbbf95dce396cde8395c5' }, h("tr", { key: '08e44beee5fb0c703694b38a7bfbc2da3691611e' }, this.canSelect && (h("th", { key: '9587a2bb1e11e5c8b44f5b7c4de3e2d6d4e7bb30', class: "select-column" }, h("label", { key: 'a2cdfaabd4fff5cba3801568de522eb60104a79e', class: "checkbox-label" }, h("input", { key: '3500b6b71893fc242b6ad956cb1190b2533e13de', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
                 this.internalSelected.size < this.items.length, onChange: this.handleSelectAll, "aria-label": "Select all rows" })))), this.headers.map(header => (h("th", { class: {
                 sortable: header.sortable !== false,
                 sorted: this.sortBy === header.value,

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DQ8MCJFX.js';
+import { d as defineCustomElement$2 } from './p-TfYzqGwr.js';
 const xplorDatePickerCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-date-picker {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-date-picker {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-date-picker {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-date-picker, ul.sc-xplor-date-picker {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-date-picker li.sc-xplor-date-picker, ul.sc-xplor-date-picker li.sc-xplor-date-picker {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-date-picker {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-date-picker {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-date-picker {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-date-picker {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-date-picker .mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-date-picker {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-date-picker:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-date-picker {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-date-picker-h {\n  display: block;\n  width: 100%;\n}\n\n.date-picker.sc-xplor-date-picker {\n  position: relative;\n  width: 100%;\n}\n.date-picker--disabled.sc-xplor-date-picker {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.date-picker__label.sc-xplor-date-picker {\n  display: block;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.date-picker__required.sc-xplor-date-picker {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.date-picker__field.sc-xplor-date-picker {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  transition: border-color 0.2s ease;\n  background: white;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within .date-picker__input.sc-xplor-date-picker {\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.date-picker--error.sc-xplor-date-picker .date-picker__field.sc-xplor-date-picker {\n  border-color: #d32f2f;\n}\n.date-picker__input.sc-xplor-date-picker {\n  flex: 1;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  border-radius: 1rem;\n  outline: none;\n  background: transparent;\n}\n.date-picker__input.sc-xplor-date-picker::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.date-picker__input.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n}\n.date-picker__actions.sc-xplor-date-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding-right: 0.5rem;\n  flex-shrink: 0;\n}\n.date-picker__clear.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__clear.sc-xplor-date-picker:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.date-picker__icon-svg.sc-xplor-date-picker {\n  display: block;\n}\n.date-picker__text-display.sc-xplor-date-picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 4px;\n  color: #008480;\n  font-size: 1rem;\n  transition: background-color 0.2s;\n}\n.date-picker__text-display.sc-xplor-date-picker:hover {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.date-picker__text-value.sc-xplor-date-picker {\n  text-decoration: underline;\n}\n.date-picker__dropdown.sc-xplor-date-picker {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 1000;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.date-picker__dropdown--top.sc-xplor-date-picker {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.date-picker__details.sc-xplor-date-picker {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.date-picker__error-message.sc-xplor-date-picker {\n  color: #d32f2f;\n}";
@@ -207,16 +207,16 @@ const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (h("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (h(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
+        const calendarIcon = (h("svg", { key: 'd78ff4ab59055d3d19d872651a7e726c0b60cfb5', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'd43dc4e0ca1d8c6b4a55484d0f6ae81f00201954', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '1f5fe56ffa03cc49409553f0c13184667c0bed62', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '18e8c75d559ce76bcd0336241955a4018daaa270', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '880167220cb172fc0f5b18b1eb0fabfc3326501b', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '53584be9a38a833329033b5e547c15671d43b9ea' }, h("div", { key: '32c32b9abd3021718994879c797d15c7c92b200a', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
+            } }, this.label && (h("label", { key: '38f0b77a965ecd259037a521984cf3edc81d83d0', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '7d4967354fe742c08170c80286c97f353fa54d5f', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '66ff5c32e4f6ca2db4feac663377afde49476a21', class: "date-picker__details" }, this.error && h("div", { key: '03cfd6ba58a9bb716e24fe008928744403b5d54c', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '9b3f462b7c80ed5be13090d376d5f74a65563811', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, h("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+            } }, h("xplor-inline-date-picker", { key: '214a5858b26b70a77d2ec4e896a5045581167d76', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
     }
     get el() { return this; }
     static get style() { return xplorDatePickerCss; }

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

@@ -1,9 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-B5rS_jjI.js';
+import { d as defineCustomElement$2 } from './p-DWaTb2EJ.js';
-const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-drag-and-drop-input {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n  display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n  position: relative;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n  display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1.5rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n  border-color: var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #616161;\n  margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  background-color: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: var(--color-secondary-50, #f3e5f5);\n  color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: #000000;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: var(--color-secondary);\n  margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  height: 6px;\n  background-color: #eeeeee;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n  height: 100%;\n  background-color: var(--color-secondary);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: #757575;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  color: #757575;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n  background-color: #e0e0e0;\n  color: #424242;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\n  }\n  .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}";
+const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-drag-and-drop-input {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n  display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n  position: relative;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n  display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n  background-color: #DFF2F1;\n  border-radius: 16px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 300px;\n  padding: 3rem 2rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n  border-color: var(--color-secondary);\n  background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: var(--color-success-100, #c8e6c9);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.drag-drop-card__body.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.drag-drop-card__text.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 48px;\n  height: 48px;\n  flex-shrink: 0;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 24px;\n  font-weight: 700;\n  line-height: 28px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 23px;\n  margin: 0;\n}\n\n.drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 23px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n}\n\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card.sc-xplor-drag-and-drop-input {\n  min-height: 210px;\n  padding: 73px 173px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__body.sc-xplor-drag-and-drop-input {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__text.sc-xplor-drag-and-drop-input {\n  text-align: left;\n  max-width: 339px;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  text-align: left;\n}\n.drag-drop-zone--horizontal.sc-xplor-drag-and-drop-input .drag-drop-card__accepts.sc-xplor-drag-and-drop-input {\n  text-align: left;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #616161;\n  margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  background-color: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: var(--color-secondary-50, #f3e5f5);\n  color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: #000000;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: var(--color-secondary);\n  margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  height: 6px;\n  background-color: #eeeeee;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n  height: 100%;\n  background-color: var(--color-secondary);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: #757575;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  color: #757575;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n  background-color: #e0e0e0;\n  color: #424242;\n}";
 const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
+const HORIZONTAL_BREAKPOINT = 700;
 const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDragAndDropInput extends H {
     constructor() {
         super();
@@ -32,6 +33,7 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         this.progress = -1;
         this.dragover = false;
         this.currentFile = null;
+        this.horizontal = false;
         this.onDrop = (e) => {
             var _a, _b;
             e.preventDefault();
@@ -114,6 +116,23 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
             return this.progress >= 0 && this.progress <= 100;
         };
     }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;
+            }
+        });
+    }
+    componentDidLoad() {
+        const zone = this.el.querySelector('.drag-drop-zone');
+        if (zone) {
+            this.resizeObserver.observe(zone);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     /**
      * Clears the currently selected file
      */
@@ -127,14 +146,15 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
         const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
-        return (h(Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, h("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, h("div", { key: 'f15e206b7f1e1741f5ee96681e000400e72d66b1', class: {
+        return (h(Host, { key: 'ca319f6606c7dbfce3e098ac331df04851c7f883' }, h("div", { key: 'ab7995b34b56bfcf783d413d66e3ea1232d1f7ee', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, h("div", { key: '56c926d929d6cd1fdf7abb793bf71957082ab332', class: {
                 'drag-drop-card': true,
                 'drag-drop-card--dragover': this.dragover,
                 'drag-drop-card--disabled': this.disabled,
-            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), h("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, h("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, h("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, h("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: 'd7fb1ad5b7190aed2eb6dfeed3b1fb60aea9741b', class: "drag-drop-card__content" }, h("div", { key: 'e9793c5e6da2444f2dc3a6fa9c87b780ebbcf6ac', class: "drag-drop-card__body" }, h("svg", { key: '86475864d73ae0ed327684db1e0b89e728ca67da', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ead2c5bf3a3850462148ba290a16de1dc656f4a9', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '94babbe372719d394d1d79d7c6c15ed32d58aa24', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("div", { key: '6f1d9f5b68401dc8139d8fd5d4c10571284ae367', class: "drag-drop-card__text" }, h("h3", { key: '3e0d81d37e40513884fc587091b8d8593db83ee3', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'f5d808b35c569d2ab24499aff8a46f35b079ed90', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), h("p", { key: '61fd2ae577886973c6396256d1d62d8b388a1cc2', class: "drag-drop-card__divider" }, "or"), h("div", { key: '44fd0339be61f3ea877a4264e39c294cf76f1a09', class: "drag-drop-card__action" }, h("xplor-button", { key: 'eaae9ef4676e8ab704f7145ca61bf29c941d6682', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '26e53d9c4837f6374825ab79d08d738c9dbaf8da', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '3be4484290b10eadf7edf6b2e51e401a5e73944f', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '91769f6bebf95d09452125d8853ad1063f138648', class: "file-info__card" }, h("div", { key: '98ecc133467eab8da00c941d727786ed02eb312a', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: '1379507c795a90afcda408d352dbe421b7bf6b0c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'db2e4bd018a094553daf7c9558a502366b180780', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '8f1b4caa023bafbeb1abfe0b3ad86947cbf3ccc7', class: "file-info__details" }, h("p", { key: '944afb1540e5c7096014ff4bca9a1355888c6295', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'a436d9deca0315b5eea5f1cb415a3b795d3c61c9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (h("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, h("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '0131e03966350788114f5ac999488c19d0186f90', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
+            : ''), this.showProgress() && (h("div", { key: '511dfd62f57ada4dd544a8d936f96f21dcd10421', class: "file-info__progress-row" }, h("div", { key: 'ff667b1c0aa9f062fb1fc7c567fa9154b5d5f349', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: 'f854ed8afc19d8f8db7f45f49c1bd143fd5db6d5', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'ac64c3bd5a4070c4429c3fd35a5d2096d3f2d23a', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: 'ab52269526a3ce92b319fd64614bb13d925014c0', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '7713047f0dc58d2e44115483ea1297ca5d4e1b19', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '476df4151904b6d4753019ff04f85fb9ed1f3ad3', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: '40a83940bb6c13a35b8ff1a6ef6ba4ad2b3fefdc', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
     }
+    get el() { return this; }
     static get style() { return xplorDragAndDropInputCss; }
 }, [2, "xplor-drag-and-drop-input", {
         "disabled": [4],
@@ -145,6 +165,7 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         "progress": [2],
         "dragover": [32],
         "currentFile": [32],
+        "horizontal": [32],
         "clearCurrentFile": [64]
     }]);
 function defineCustomElement$1() {