@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-file-upload/xplor-file-upload.js

@@ -0,0 +1,347 @@
+import { Host, h } from "@stencil/core";
+const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
+export class XplorFileUpload {
+    constructor() {
+        /**
+         * Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.
+         */
+        this.accepts = DEFAULT_ACCEPT_ALL;
+        /**
+         * Maximum file size in bytes
+         */
+        this.maxSize = 10 * 1024 * 1024; // 10MB default
+        /**
+         * Allow multiple file selection
+         */
+        this.multiple = false;
+        /**
+         * Disable the file upload
+         */
+        this.disabled = false;
+        /**
+         * Show image preview for uploaded images
+         */
+        this.showPreview = true;
+        /**
+         * Label text for the upload button
+         */
+        this.label = 'Upload Files';
+        this.files = [];
+        this.isDragging = false;
+        this.error = '';
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (input.files) {
+                this.processFiles(Array.from(input.files));
+            }
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            if (!this.disabled) {
+                this.isDragging = true;
+            }
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            this.isDragging = false;
+            if (this.disabled)
+                return;
+            if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                this.processFiles(Array.from(event.dataTransfer.files));
+            }
+        };
+        this.handleRemoveFile = (fileToRemove) => {
+            this.files = this.files.filter(f => f.id !== fileToRemove.id);
+            this.xplorFileRemove.emit(fileToRemove);
+        };
+        this.handleButtonClick = () => {
+            if (!this.disabled && this.fileInputEl) {
+                this.fileInputEl.click();
+            }
+        };
+    }
+    processFiles(fileList) {
+        this.error = '';
+        const validFiles = [];
+        for (const file of fileList) {
+            // Validate file size
+            if (file.size > this.maxSize) {
+                const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(2);
+                this.error = `File "${file.name}" exceeds maximum size of ${maxSizeMB}MB`;
+                this.xplorError.emit(this.error);
+                continue;
+            }
+            // Validate file type if specified
+            if (this.accepts !== '*/*') {
+                const acceptedTypes = this.accepts.split(',').map(t => t.trim());
+                const fileExtension = `.${file.name.split('.').pop()}`;
+                const isAccepted = acceptedTypes.some(type => {
+                    if (type.endsWith('/*')) {
+                        return file.type.startsWith(type.replace('/*', ''));
+                    }
+                    return type === file.type || type === fileExtension;
+                });
+                if (!isAccepted) {
+                    this.error = `File type "${file.type}" is not accepted`;
+                    this.xplorError.emit(this.error);
+                    continue;
+                }
+            }
+            const uploadedFile = {
+                file,
+                id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                name: file.name,
+                size: file.size,
+                type: file.type,
+            };
+            // Generate preview for images
+            if (this.showPreview && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    var _a;
+                    uploadedFile.dataUrl = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+                    this.files = [...this.files];
+                };
+                reader.readAsDataURL(file);
+            }
+            validFiles.push(uploadedFile);
+        }
+        if (validFiles.length > 0) {
+            if (this.multiple) {
+                this.files = [...this.files, ...validFiles];
+            }
+            else {
+                this.files = [validFiles[0]];
+            }
+            this.xplorFileAdd.emit(validFiles);
+        }
+        // Reset input
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+    render() {
+        return (h(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, h("div", { key: 'd1f1198c0d47009ffa85cc1188d292029b979111', class: {
+                'file-upload__dropzone': true,
+                'file-upload__dropzone--dragging': this.isDragging,
+                'file-upload__dropzone--disabled': this.disabled,
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '1625dae6ee5648ea0dee0673a892420d0dab2e7c', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), h("div", { key: '2d1e0ff6e55dd56df7ff04829128dd74eb05d350', class: "file-upload__content" }, h("svg", { key: 'aab4f33389ed3cddc4d6a30300d384209058f64e', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '51da727eaa0d9394184b54c845ae70c0de2c9c5c', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '38123b6c7c9c898040a225d851ff7b488f8fedf4', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), h("p", { key: '530f416409a178f0dc9de208476085452e66156a', class: "file-upload__text" }, "Drag & drop files here or", ' ', h("button", { key: '9465171b3ee487fbf0e7aa75da09709eb061a32e', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), h("p", { key: 'b94b0c91a37fc218362a25ffe46d77929a6752f5', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (h("div", { key: '46a708db58e94110d41a8b86571dd29e58e76ae2', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (h("div", { key: '95d2aadf7587f759ecd3b55a84b7d6a7ec8c61ac', class: "file-upload__files" }, this.files.map((file) => (h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), h("div", { class: "file-upload__file-info" }, h("span", { class: "file-upload__file-name", title: file.name }, file.name), h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), h("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
+    }
+    static get is() { return "xplor-file-upload"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accepts": {
+                "type": "string",
+                "attribute": "accepts",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "DEFAULT_ACCEPT_ALL"
+            },
+            "maxSize": {
+                "type": "number",
+                "attribute": "max-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum file size in bytes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "10 * 1024 * 1024"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple file selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the file upload"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showPreview": {
+                "type": "boolean",
+                "attribute": "show-preview",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show image preview for uploaded images"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the upload button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Upload Files'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {},
+            "isDragging": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorFileAdd",
+                "name": "xplorFileAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "UploadedFile[]",
+                    "resolved": "UploadedFile[]",
+                    "references": {
+                        "UploadedFile": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
+                            "id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorFileRemove",
+                "name": "xplorFileRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "UploadedFile",
+                    "resolved": "UploadedFile",
+                    "references": {
+                        "UploadedFile": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
+                            "id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorError",
+                "name": "xplorError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-file-upload.js.map

package/dist/collection/components/xplor-file-upload/xplor-file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-file-upload.js","sourceRoot":"","sources":["../../../src/components/xplor-file-upload/xplor-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\nexport interface UploadedFile {\n    file: File;\n    id: string;\n    name: string;\n    size: number;\n    type: string;\n    dataUrl?: string;\n}\n\n@Component({\n    tag: 'xplor-file-upload',\n    styleUrl: 'xplor-file-upload.scss',\n    scoped: true,\n})\nexport class XplorFileUpload {\n    /**\n     * Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.\n     */\n    @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n    /**\n     * Maximum file size in bytes\n     */\n    @Prop() maxSize: number = 10 * 1024 * 1024; // 10MB default\n\n    /**\n     * Allow multiple file selection\n     */\n    @Prop() multiple: boolean = false;\n\n    /**\n     * Disable the file upload\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Show image preview for uploaded images\n     */\n    @Prop() showPreview: boolean = true;\n\n    /**\n     * Label text for the upload button\n     */\n    @Prop() label: string = 'Upload Files';\n\n    @State() files: UploadedFile[] = [];\n    @State() isDragging: boolean = false;\n    @State() error: string = '';\n\n    @Event() xplorFileAdd: EventEmitter<UploadedFile[]>;\n    @Event() xplorFileRemove: EventEmitter<UploadedFile>;\n    @Event() xplorError: EventEmitter<string>;\n\n    private fileInputEl: HTMLInputElement;\n\n    private handleFileSelect = (event: Event) => {\n        const input = event.target as HTMLInputElement;\n        if (input.files) {\n            this.processFiles(Array.from(input.files));\n        }\n    };\n\n    private handleDragOver = (event: DragEvent) => {\n        event.preventDefault();\n        if (!this.disabled) {\n            this.isDragging = true;\n        }\n    };\n\n    private handleDragLeave = (event: DragEvent) => {\n        event.preventDefault();\n        this.isDragging = false;\n    };\n\n    private handleDrop = (event: DragEvent) => {\n        event.preventDefault();\n        this.isDragging = false;\n\n        if (this.disabled) return;\n\n        if (event.dataTransfer?.files) {\n            this.processFiles(Array.from(event.dataTransfer.files));\n        }\n    };\n\n    private processFiles(fileList: File[]) {\n        this.error = '';\n        const validFiles: UploadedFile[] = [];\n\n        for (const file of fileList) {\n            // Validate file size\n            if (file.size > this.maxSize) {\n                const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(2);\n                this.error = `File \"${file.name}\" exceeds maximum size of ${maxSizeMB}MB`;\n                this.xplorError.emit(this.error);\n                continue;\n            }\n\n            // Validate file type if specified\n            if (this.accepts !== '*/*') {\n                const acceptedTypes = this.accepts.split(',').map(t => t.trim());\n                const fileExtension = `.${file.name.split('.').pop()}`;\n                const isAccepted = acceptedTypes.some(type => {\n                    if (type.endsWith('/*')) {\n                        return file.type.startsWith(type.replace('/*', ''));\n                    }\n                    return type === file.type || type === fileExtension;\n                });\n\n                if (!isAccepted) {\n                    this.error = `File type \"${file.type}\" is not accepted`;\n                    this.xplorError.emit(this.error);\n                    continue;\n                }\n            }\n\n            const uploadedFile: UploadedFile = {\n                file,\n                id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n                name: file.name,\n                size: file.size,\n                type: file.type,\n            };\n\n            // Generate preview for images\n            if (this.showPreview && file.type.startsWith('image/')) {\n                const reader = new FileReader();\n                reader.onload = (e) => {\n                    uploadedFile.dataUrl = e.target?.result as string;\n                    this.files = [...this.files];\n                };\n                reader.readAsDataURL(file);\n            }\n\n            validFiles.push(uploadedFile);\n        }\n\n        if (validFiles.length > 0) {\n            if (this.multiple) {\n                this.files = [...this.files, ...validFiles];\n            } else {\n                this.files = [validFiles[0]];\n            }\n            this.xplorFileAdd.emit(validFiles);\n        }\n\n        // Reset input\n        if (this.fileInputEl) {\n            this.fileInputEl.value = '';\n        }\n    }\n\n    private handleRemoveFile = (fileToRemove: UploadedFile) => {\n        this.files = this.files.filter(f => f.id !== fileToRemove.id);\n        this.xplorFileRemove.emit(fileToRemove);\n    };\n\n    private handleButtonClick = () => {\n        if (!this.disabled && this.fileInputEl) {\n            this.fileInputEl.click();\n        }\n    };\n\n    private formatFileSize(bytes: number): string {\n        if (bytes === 0) return '0 Bytes';\n        const k = 1024;\n        const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n        const i = Math.floor(Math.log(bytes) / Math.log(k));\n        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"file-upload\">\n                    <div\n                        class={{\n                            'file-upload__dropzone': true,\n                            'file-upload__dropzone--dragging': this.isDragging,\n                            'file-upload__dropzone--disabled': this.disabled,\n                        }}\n                        onDragOver={this.handleDragOver}\n                        onDragLeave={this.handleDragLeave}\n                        onDrop={this.handleDrop}\n                    >\n                        <input\n                            ref={(el) => (this.fileInputEl = el)}\n                            type=\"file\"\n                            accept={this.accepts}\n                            multiple={this.multiple}\n                            disabled={this.disabled}\n                            onChange={this.handleFileSelect}\n                            class=\"file-upload__input\"\n                        />\n\n                        <div class=\"file-upload__content\">\n                            <svg class=\"file-upload__icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\">\n                                <path d=\"M12 15V3M12 3L8 7M12 3L16 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n                            </svg>\n                            <p class=\"file-upload__text\">\n                                Drag & drop files here or{' '}\n                                <button\n                                    type=\"button\"\n                                    class=\"file-upload__button\"\n                                    onClick={this.handleButtonClick}\n                                    disabled={this.disabled}\n                                >\n                                    {this.label}\n                                </button>\n                            </p>\n                            <p class=\"file-upload__hint\">\n                                Max size: {this.formatFileSize(this.maxSize)}\n                                {this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`}\n                            </p>\n                        </div>\n                    </div>\n\n                    {this.error && (\n                        <div class=\"file-upload__error\" role=\"alert\">\n                            {this.error}\n                        </div>\n                    )}\n\n                    {this.files.length > 0 && (\n                        <div class=\"file-upload__files\">\n                            {this.files.map((file) => (\n                                <div key={file.id} class=\"file-upload__file\">\n                                    {file.dataUrl && (\n                                        <img src={file.dataUrl} alt={file.name} class=\"file-upload__preview\" />\n                                    )}\n                                    <div class=\"file-upload__file-info\">\n                                        <span class=\"file-upload__file-name\" title={file.name}>\n                                            {file.name}\n                                        </span>\n                                        <span class=\"file-upload__file-size\">\n                                            {this.formatFileSize(file.size)}\n                                        </span>\n                                    </div>\n                                    <button\n                                        type=\"button\"\n                                        class=\"file-upload__remove\"\n                                        onClick={() => this.handleRemoveFile(file)}\n                                        aria-label={`Remove ${file.name}`}\n                                    >\n                                        ×\n                                    </button>\n                                </div>\n                            ))}\n                        </div>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.css

@@ -0,0 +1,300 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    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);
+    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);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: inline-block;
+}
+
+.xplor-inline-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+.xplor-inline-checkbox__input {
+  width: 1.125rem;
+  height: 1.125rem;
+  cursor: pointer;
+  margin: 0;
+  flex-shrink: 0;
+}
+.xplor-inline-checkbox__input:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+.xplor-inline-checkbox__label {
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.87);
+}
+.xplor-inline-checkbox--disabled {
+  cursor: not-allowed;
+}
+.xplor-inline-checkbox--disabled .xplor-inline-checkbox__label {
+  color: rgba(0, 0, 0, 0.38);
+}