@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-input-title/xplor-input-title.js

@@ -0,0 +1,164 @@
+import { Host, h } from "@stencil/core";
+export class XplorInputTitle {
+    constructor() {
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         */
+        this.readonly = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+    }
+    static get is() { return "xplor-input-title"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-input-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-input-title.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorInput",
+                "name": "xplorInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorChange",
+                "name": "xplorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xplor-input-title.js.map

package/dist/collection/components/xplor-input-title/xplor-input-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-input-title.js","sourceRoot":"","sources":["../../../src/components/xplor-input-title/xplor-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAY1B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;KAkBH;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-title',\n  styleUrl: 'xplor-input-title.scss',\n  scoped: true,\n})\nexport class XplorInputTitle {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          type=\"text\"\n          class=\"xplor-input-title\"\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-links/xplor-links.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+.x-link {
+  display: block;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  color: var(--xplor-link-color);
+}

package/dist/collection/components/xplor-links/xplor-links.js

@@ -0,0 +1,42 @@
+import { h, Host } from "@stencil/core";
+export class XplorLinks {
+    render() {
+        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+    }
+    static get is() { return "xplor-links"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-links.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-links.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "brand": {
+                "type": "string",
+                "attribute": "brand",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xplor-links.js.map

package/dist/collection/components/xplor-links/xplor-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-links.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,UAAU;IAErB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,0DAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB;gBACxC,GAAG;;gBACmB,GAAG,CACxB;YACJ,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,2DAAI,KAAK,EAAC,wBAAwB,iDAAgD,CAC9E;YACN,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,2DAA2D;oBACpE,4DAAK,KAAK,EAAC,UAAU;wBACnB,2DAAI,KAAK,EAAC,6EAA6E,0BAElF;wBACL,0DAAG,KAAK,EAAC,8BAA8B,kJAGnC,CACA;oBACN,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE;wBACpF;4BACE,4DAAK,KAAK,EAAC,2BAA2B;gCACpC,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAC,EAAE,GACN;gCACF;oCACE,2DAAI,KAAK,EAAC,wDAAwD,uBAAsB;oCACxF,0DAAG,KAAK,EAAC,yCAAyC,uBAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n  tag: 'xplor-links',\n  styleUrl: 'xplor-links.css',\n  shadow: true,\n})\nexport class XplorLinks {\n  @Prop() brand: string;\n  render() {\n    return (\n      <Host class={`theme-${this.brand}`}>\n        <a class=\"x-link\" href=\"https://google.com\">\n          {' '}\n          googole this is a link{' '}\n        </a>\n        <div class=\"bg-black p-2 rounded-md flex justify-center\">\n          <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n        </div>\n        <div class=\"bg-white py-24 sm:py-32\">\n          <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n            <div class=\"max-w-xl\">\n              <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n                Meet our leadership\n              </h2>\n              <p class=\"mt-6 text-lg/8 text-gray-600\">\n                We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n                best results for our clients.\n              </p>\n            </div>\n            <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n              <li>\n                <div class=\"flex items-center gap-x-6\">\n                  <img\n                    class=\"size-16 rounded-full\"\n                    src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\"\n                    alt=\"\"\n                  />\n                  <div>\n                    <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n                    <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n                  </div>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-links/xplor-links.stories.js

@@ -0,0 +1,18 @@
+export default {
+    // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder
+    title: 'Components/Link',
+    tags: ['autodocs'],
+    // this is an example of how to add actions to the story
+    parameters: {
+        actions: {
+            argTypesRegex: '^on.*',
+            handles: ['click'], // you can add custom events to this array to trigger actions
+        },
+    },
+};
+const Template = (args) => `<xplor-links text="${args.text}"></xplor-links>`;
+export const Example = Template.bind({});
+Example.args = {
+    text: 'John',
+};
+//# sourceMappingURL=xplor-links.stories.js.map

package/dist/collection/components/xplor-links/xplor-links.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-links.stories.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,mEAAmE;IACnE,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,wDAAwD;IACxD,UAAU,EAAE;QACV,OAAO,EAAE;YACP,aAAa,EAAE,OAAO;YACtB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,6DAA6D;SAClF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,sBAAsB,IAAI,CAAC,IAAI,kBAAkB,CAAC;AAE7E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;CACb,CAAC","sourcesContent":["export default {\n  // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder\n  title: 'Components/Link',\n  tags: ['autodocs'],\n  // this is an example of how to add actions to the story\n  parameters: {\n    actions: {\n      argTypesRegex: '^on.*',\n      handles: ['click'], // you can add custom events to this array to trigger actions\n    },\n  },\n};\n\nconst Template = (args) => `<xplor-links text=\"${args.text}\"></xplor-links>`;\n\nexport const Example = Template.bind({});\nExample.args = {\n  text: 'John',\n};\n"]}

package/dist/collection/components/xplor-modal/xplor-modal.css

@@ -0,0 +1,385 @@
+/* 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: contents;
+}
+
+.xplor-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 1rem;
+}
+.xplor-modal__card {
+  position: relative;
+  background-color: white;
+  border-radius: 1rem;
+  padding: 1rem;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  animation: xplor-modal-fade-in 0.2s ease-out;
+}
+.xplor-modal__card--scrollable {
+  overflow: hidden;
+}
+.xplor-modal__close-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  background-color: white;
+  color: #008480;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  z-index: 1;
+}
+.xplor-modal__close-btn:hover {
+  background-color: #E6F7F7;
+}
+.xplor-modal__close-btn:active {
+  background-color: #D0EBD2;
+}
+.xplor-modal__title {
+  padding-right: 3rem;
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  white-space: normal;
+  word-wrap: break-word;
+}
+.xplor-modal__subtitle {
+  margin: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.xplor-modal__body {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+.xplor-modal__body--no-title {
+  margin-top: 3.5rem;
+}
+.xplor-modal__actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin: 1rem 0;
+}
+.xplor-modal__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+}
+.xplor-modal__spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #008480;
+  border-radius: 50%;
+  animation: xplor-spinner-rotate 0.8s linear infinite;
+}
+
+@keyframes xplor-modal-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes xplor-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}