@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,212 @@
+import { Host, h } from "@stencil/core";
+export class XplorButton {
+    constructor() {
+        this.type = 'secondary';
+        this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
+        /**
+         * Icon to display (defaults to plus sign)
+         */
+        this.icon = '+';
+    }
+    renderIcon() {
+        if (this.icon === 'svg' && this.iconSvg) {
+            return (h("span", { class: "button-icon button-icon--svg ", innerHTML: this.iconSvg }));
+        }
+        return (h("span", { class: "button-icon" }, this.icon));
+    }
+    render() {
+        const isIconOnly = !this.text && this.iconPosition !== null;
+        const hasIcon = this.iconPosition !== null;
+        return (h(Host, { key: '94fed7b7f39f8aca0273d5b6da123e1ce7d87d01' }, h("slot", { key: 'fd6a53ce8ce00175207dff16d976379a0ab8040b' }, h("button", { key: 'a688aabc8675ef63f3c18c2af4b0a24c8bc29de7', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'shadow': this.type !== 'minimal' && this.type !== 'text', 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction() }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '82d9558a551bcc23ead90b3f42d0fcd94bd7301f', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+    }
+    static get is() { return "xplor-button"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "attribute": "text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text'",
+                    "resolved": "\"disabled\" | \"ghost\" | \"minimal\" | \"primary\" | \"secondary\" | \"success\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "mode": {
+                "type": "string",
+                "attribute": "mode",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'pg' | 'office'",
+                    "resolved": "\"dark\" | \"office\" | \"pg\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'pg'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "styles": {
+                "type": "string",
+                "attribute": "styles",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "clickAction": {
+                "type": "unknown",
+                "attribute": "click-action",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "attribute": "icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end' | null",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position: 'start' | 'end' | null"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display (defaults to plus sign)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'+'"
+            },
+            "iconSvg": {
+                "type": "string",
+                "attribute": "icon-svg",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xplor-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-button.js","sourceRoot":"","sources":["../../../src/components/xplor-button/xplor-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAezD,MAAM,OAAO,WAAW;IAbxB;QAeU,SAAI,GAAoF,WAAW,CAAC;QACpG,SAAI,GAA8B,IAAI,CAAC,CAAC,2CAA2C;QAU3F;;WAEG;QACK,SAAI,GAAW,GAAG,CAAC;KA6C5B;IA1CS,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACxC,OAAO,CACL,YAAM,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAS,CAC7E,CAAC;QACJ,CAAC;QACD,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,IACtB,IAAI,CAAC,IAAI,CACL,CACR,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC;QAE3C,OAAO,CACL,EAAC,IAAI;YACH;gBACE,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,kBACH,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACzD,qBAAqB,EAAE,UAAU,EACjC,qBAAqB,EAAE,OAAO,IAAI,CAAC,UAAU,EAC7C,sBAAsB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,CAAC,UAAU,EACpE,oBAAoB,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,CAAC,UAAU,IAC7D,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAEjD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE;oBAEpD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;oBAC7D,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,IAAI,CAAQ;oBACzD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CACrD,CACJ,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-button',\n  styleUrl: 'xplor-button.scss',\n  // we cant use multiple styleUrls because the mode property is not reactive only in stencilJS and once the component is rendered it wont change the css file\n  // so we are using only one styleUrl and changing the styles based on the mode property in the class\n  // styleUrls: {\n  //   default: 'xplor-button.scss',\n  //   dark: 'xplor-button-pg.scss',\n  //   pg: 'xplor-button-pg.scss',\n  //   office: 'xplor-button-office.scss',\n  // },\n  scoped: true,\n})\nexport class XplorButton {\n  @Prop() text: string;\n  @Prop() type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n  @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n  @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n  @Prop() styles?: string;\n  @Prop() clickAction: () => void;\n\n  /**\n   * Icon position: 'start' | 'end' | null\n   */\n  @Prop() iconPosition: 'start' | 'end' | null;\n\n  /**\n   * Icon to display (defaults to plus sign)\n   */\n  @Prop() icon: string = '+';\n  @Prop() iconSvg?: string;\n\n  private renderIcon() {\n    if (this.icon === 'svg' && this.iconSvg) {\n      return (\n        <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n      );\n    }\n    return (\n      <span class=\"button-icon\">\n        {this.icon}\n      </span>\n    );\n  }\n\n  render() {\n    const isIconOnly = !this.text && this.iconPosition !== null;\n    const hasIcon = this.iconPosition !== null;\n\n    return (\n      <Host>\n        <slot>\n          <button\n            role=\"button\"\n            class={{\n              'x-button': true,\n              [this.type]: true,\n              'shadow': this.type !== 'minimal' && this.type !== 'text',\n              'x-button--icon-only': isIconOnly,\n              'x-button--with-icon': hasIcon && !isIconOnly,\n              'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n              'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n              ...(this.styles ? { [this.styles]: true } : {}),\n            }}\n            onClick={() => this.clickAction && this.clickAction()}\n          >\n            {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n            {this.text && <span class=\"button-text\">{this.text}</span>}\n            {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n          </button>\n        </slot>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/xplor-button/xplor-buttons.stories.js

@@ -0,0 +1,49 @@
+export default {
+    // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder
+    title: 'Components/Button',
+    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
+        },
+    },
+    argTypes: {
+        text: { control: 'text' },
+        styles: { control: 'text' },
+        mode: { control: 'text' },
+        type: {
+            control: { type: 'select' },
+            options: ['primary', 'ghost', 'minimal'],
+        },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+const Template = (args) => `<xplor-button type="${args.type}" styles="${args.styles}" mode="${args.mode}" text="${args.text}"></xplor-button>`;
+export const Primary = Template.bind({});
+Primary.args = {
+    mode: 'default',
+    text: 'click me',
+    type: 'primary',
+};
+export const Ghost = Template.bind({});
+Ghost.args = {
+    mode: 'default',
+    text: 'click me',
+    type: 'ghost',
+};
+export const Minimal = Template.bind({});
+Minimal.args = {
+    mode: 'default',
+    text: 'click me',
+    type: 'minimal',
+};
+export const PG = Template.bind({});
+PG.args = {
+    text: 'click me',
+    type: 'primary',
+    mode: 'pg',
+    styles: 'bg-blue-500 text-white',
+};
+//# sourceMappingURL=xplor-buttons.stories.js.map

package/dist/collection/components/xplor-button/xplor-buttons.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-buttons.stories.js","sourceRoot":"","sources":["../../../src/components/xplor-button/xplor-buttons.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,mEAAmE;IACnE,KAAK,EAAE,mBAAmB;IAC1B,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;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC;SACzC;KACF;IACD,wJAAwJ;CACzJ,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACxB,uBAAuB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,mBAAmB,CAAC;AAEtH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,SAAS;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpC,EAAE,CAAC,IAAI,GAAG;IACR,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,wBAAwB;CACjC,CAAC","sourcesContent":["export default {\n  // this creates a ‘Components’ folder and a ‘MyComponent’ subfolder\n  title: 'Components/Button',\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  argTypes: {\n    text: { control: 'text' },\n    styles: { control: 'text' },\n    mode: { control: 'text' },\n    type: {\n      control: { type: 'select' },\n      options: ['primary', 'ghost', 'minimal'],\n    },\n  },\n  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n};\n\nconst Template = (args) =>\n  `<xplor-button type=\"${args.type}\" styles=\"${args.styles}\" mode=\"${args.mode}\" text=\"${args.text}\"></xplor-button>`;\n\nexport const Primary = Template.bind({});\n\nPrimary.args = {\n  mode: 'default',\n  text: 'click me',\n  type: 'primary',\n};\n\nexport const Ghost = Template.bind({});\nGhost.args = {\n  mode: 'default',\n  text: 'click me',\n  type: 'ghost',\n};\n\nexport const Minimal = Template.bind({});\nMinimal.args = {\n  mode: 'default',\n  text: 'click me',\n  type: 'minimal',\n};\nexport const PG = Template.bind({});\nPG.args = {\n  text: 'click me',\n  type: 'primary',\n  mode: 'pg',\n  styles: 'bg-blue-500 text-white',\n};\n"]}

package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.css

@@ -0,0 +1,276 @@
+/* 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: block;
+}
+
+.container {
+  display: flex;
+  margin-top: 20px;
+}