@xplor-education/core-stencil-components 3.2.2 → 3.2.4

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 (33) hide show
  1. package/components/{p-Dxhn9FLU.js → p-DiaNPkGZ.js} +4 -4
  2. package/components/p-DiaNPkGZ.js.map +1 -0
  3. package/components/xplor-btn-tooltip.js +1 -1
  4. package/components/xplor-button.js +1 -1
  5. package/components/xplor-chat-widget.js +1 -1
  6. package/components/xplor-drag-and-drop-input.js +1 -1
  7. package/components/xplor-input-send.js +1 -1
  8. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +2 -2
  9. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -1
  10. package/dist/collection/components/xplor-button/xplor-button.css +10 -0
  11. package/dist/collection/components/xplor-button/xplor-button.js +3 -3
  12. package/dist/collection/components/xplor-button/xplor-button.js.map +1 -1
  13. package/dist/components/{p-hygTyb6H.js → p-BCTIARwU.js} +4 -4
  14. package/dist/components/p-BCTIARwU.js.map +1 -0
  15. package/dist/components/xplor-btn-tooltip.js +1 -1
  16. package/dist/components/xplor-button.js +1 -1
  17. package/dist/components/xplor-chat-widget.js +1 -1
  18. package/dist/components/xplor-drag-and-drop-input.js +1 -1
  19. package/dist/components/xplor-input-send.js +1 -1
  20. package/dist/esm/xplor-alert-dialog_60.entry.js +2 -2
  21. package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -1
  22. package/dist/hydrate/index.js +2 -2
  23. package/dist/hydrate/index.mjs +2 -2
  24. package/dist/types/components/xplor-button/xplor-button.d.ts +1 -1
  25. package/dist/types/components.d.ts +2 -2
  26. package/dist/xplor-component-library/p-8454512e.entry.js +2 -0
  27. package/dist/xplor-component-library/p-8454512e.entry.js.map +1 -0
  28. package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
  29. package/package.json +1 -1
  30. package/components/p-Dxhn9FLU.js.map +0 -1
  31. package/dist/components/p-hygTyb6H.js.map +0 -1
  32. package/dist/xplor-component-library/p-9499d15d.entry.js +0 -2
  33. package/dist/xplor-component-library/p-9499d15d.entry.js.map +0 -1
package/dist/collection/components/xplor-button/xplor-button.css CHANGED
@@ -1166,6 +1166,16 @@ ul.mdc-list li.mdc-list-item {
1166
1166
  border-color: var(--color-secondary-50, #f3e5f5);
1167
1167
  color: white;
1168
1168
  }
1169
+ .x-button.tertiary {
1170
+ background-color: var(--color-tertiary, rgb(219, 59, 3));
1171
+ border-color: var(--color-tertiary, rgb(219, 59, 3));
1172
+ color: white;
1173
+ }
1174
+ .x-button.tertiary:hover {
1175
+ background-color: rgba(219, 59, 3, 0.85);
1176
+ border-color: rgba(219, 59, 3, 0.85);
1177
+ color: white;
1178
+ }
1169
1179
  .x-button.ghost {
1170
1180
  background-color: #fff;
1171
1181
  border-color: var(--color-secondary);
package/dist/collection/components/xplor-button/xplor-button.js CHANGED
@@ -30,7 +30,7 @@ export class XplorButton {
30
30
  const isFullWidth = this.fullWidth || this.fullWidthAttr;
31
31
  const isIconOnly = !this.text && this.iconPosition !== null;
32
32
  const hasIcon = this.iconPosition !== null;
33
- return (h(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, h("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
33
+ return (h(Host, { key: 'd338a1b17a25fc843820a5dde83a38663a6ebb2e', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: '5a6e640c188b9b9e1165add358cb71b97c319dd0' }, h("button", { key: 'c699bebecfac65bb0705f6397891afe22105b12c', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: 'd830e09d660f0260e83a4eca4cf41ab49aa4a490', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
34
34
  }
35
35
  static get is() { return "xplor-button"; }
36
36
  static get encapsulation() { return "scoped"; }
@@ -70,8 +70,8 @@ export class XplorButton {
70
70
  "attribute": "type",
71
71
  "mutable": false,
72
72
  "complexType": {
73
- "original": "'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text'",
74
- "resolved": "\"disabled\" | \"ghost\" | \"minimal\" | \"primary\" | \"secondary\" | \"success\" | \"text\"",
73
+ "original": "'minimal' | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'disabled' | 'success' | 'text'",
74
+ "resolved": "\"disabled\" | \"ghost\" | \"minimal\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"text\"",
75
75
  "references": {}
76
76
  },
77
77
  "required": false,
package/dist/collection/components/xplor-button/xplor-button.js.map CHANGED
@@ -1 +1 @@
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;QAK3F,6CAA6C;QACrC,cAAS,GAAkB,IAAI,CAAC;QAExC,qCAAqC;QAC7B,aAAQ,GAAY,KAAK,CAAC;QAElC,kEAAkE;QACzC,cAAS,GAAY,KAAK,CAAC;QAEpD,gGAAgG;QAC9D,kBAAa,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACK,iBAAY,GAA2B,IAAI,CAAC;QAEpD;;WAEG;QACK,SAAI,GAAW,GAAG,CAAC;KAiD5B;IA9CS,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,WAAW,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACzD,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,qDAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,WAAW,EAAE;YAClD;gBACE,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,kBACH,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EACjB,sBAAsB,EAAE,WAAW,EACnC,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,gBACzC,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBAEtB,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 /** Accessible label for icon-only buttons */\n @Prop() ariaLabel: string | null = null;\n\n /** Whether the button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether the button stretches to full width of its container */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */\n @Prop({ attribute: 'fullwidth' }) fullWidthAttr: boolean = false;\n\n /**\n * Icon position: 'start' | 'end' | null\n */\n @Prop() iconPosition: 'start' | 'end' | null = 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 isFullWidth = this.fullWidth || this.fullWidthAttr;\n const isIconOnly = !this.text && this.iconPosition !== null;\n const hasIcon = this.iconPosition !== null;\n\n return (\n <Host class={{ 'x-button--full-width': isFullWidth }}>\n <slot>\n <button\n role=\"button\"\n class={{\n 'x-button': true,\n [this.type]: true,\n 'x-button--full-width': isFullWidth,\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 aria-label={this.ariaLabel}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\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}"]}
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,GAAiG,WAAW,CAAC;QACjH,SAAI,GAA8B,IAAI,CAAC,CAAC,2CAA2C;QAK3F,6CAA6C;QACrC,cAAS,GAAkB,IAAI,CAAC;QAExC,qCAAqC;QAC7B,aAAQ,GAAY,KAAK,CAAC;QAElC,kEAAkE;QACzC,cAAS,GAAY,KAAK,CAAC;QAEpD,gGAAgG;QAC9D,kBAAa,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACK,iBAAY,GAA2B,IAAI,CAAC;QAEpD;;WAEG;QACK,SAAI,GAAW,GAAG,CAAC;KAiD5B;IA9CS,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,WAAW,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;QACzD,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,qDAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,WAAW,EAAE;YAClD;gBACE,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,kBACH,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EACjB,sBAAsB,EAAE,WAAW,EACnC,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,gBACzC,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBAEtB,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' | 'tertiary' | '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 /** Accessible label for icon-only buttons */\n @Prop() ariaLabel: string | null = null;\n\n /** Whether the button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether the button stretches to full width of its container */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */\n @Prop({ attribute: 'fullwidth' }) fullWidthAttr: boolean = false;\n\n /**\n * Icon position: 'start' | 'end' | null\n */\n @Prop() iconPosition: 'start' | 'end' | null = 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 isFullWidth = this.fullWidth || this.fullWidthAttr;\n const isIconOnly = !this.text && this.iconPosition !== null;\n const hasIcon = this.iconPosition !== null;\n\n return (\n <Host class={{ 'x-button--full-width': isFullWidth }}>\n <slot>\n <button\n role=\"button\"\n class={{\n 'x-button': true,\n [this.type]: true,\n 'x-button--full-width': isFullWidth,\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 aria-label={this.ariaLabel}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\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/components/{p-hygTyb6H.js → p-BCTIARwU.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
2
 
3
- const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-button {\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-button {\n width: 600px !important;\n }\n}\nh1.sc-xplor-button {\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-button {\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-button {\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-button {\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-button, ul.sc-xplor-button {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-button li.sc-xplor-button, ul.sc-xplor-button li.sc-xplor-button {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-button, ul.mdc-list.sc-xplor-button {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-button {\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-button {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-button {\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-button {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-button .mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\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-button .mdc-notched-outline__notch.sc-xplor-button {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-button {\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-button:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-button {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-button {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-button {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-button {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-button {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-button {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-button {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-button {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-button {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-button {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-button {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-button {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-button {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-button {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-button {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-button {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-button {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-button {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-button {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-button {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-button {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-button {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-button {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-button {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-button {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-button {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-button {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-button {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-button {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-button {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-button {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-button {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-button {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-button {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-button {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-button {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-button {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-button {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-button {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-button {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-button {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-button {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-button {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-button {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-button {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-button {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-button {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-button {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-button {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-button {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-button {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-button {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-button {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-button {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-button {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-button {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-button {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-button {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-button {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-button {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-button {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-button {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-button {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-button {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-button {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-button {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-button {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-button {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-button {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-button {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-button {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-button {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-button {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-button {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-button {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-button {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-button {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-button {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-button {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-button {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-button {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-button {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-button {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-button {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-button {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-button {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-button {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-button {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-button {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-button {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-button {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-button {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-button {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-button {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-button {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-button {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-button {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-button {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-button {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-button {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-button {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-button {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-button {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-button {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-button {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-button {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-button {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-button {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-button {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-button {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-button {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-button {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-button {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-button {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-button {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-button {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-button {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-button {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-button {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-button {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-button {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-button {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-button {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-button {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-button {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-button {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-button {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-button {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-button {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-button {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-button {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-button {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-button {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-button {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-button {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-button {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-button {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-button {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-button {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-button {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-button {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-button {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-button {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-button {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-button {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-button {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-button {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-button {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-button {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-button {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-button {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-button {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-button {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-button {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-button {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-button {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-button {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-button {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-button {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-button {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-button {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-button {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-button {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-button {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-button {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-button {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-button {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-button {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-button {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-button {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-button {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-button {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-button {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-button {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-button {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-button {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-button {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-button {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-button {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-button {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-button {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-button {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-button {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-button-h {\n display: block;\n}\n\n.x-button--full-width.sc-xplor-button-h {\n width: 100%;\n}\n\n.x-button--full-width.sc-xplor-button {\n width: 100%;\n}\n\n.x-button.sc-xplor-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: 0.75rem 1.5rem;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n}\n.x-button.x-button--icon-only.sc-xplor-button {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 1rem;\n height: 1rem;\n display: block;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon.sc-xplor-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n}\n.x-button.x-button--with-icon.x-button--icon-start.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-right: 0.5rem;\n}\n.x-button.x-button--with-icon.x-button--icon-end.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-left: 0.5rem;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n display: block;\n width: 14px;\n height: 14px;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button path.sc-xplor-button {\n fill: currentColor;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-text.sc-xplor-button {\n line-height: 1;\n}\n.x-button.x-button--icon-start.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.x-button--icon-end.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.primary.sc-xplor-button {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: white;\n}\n.x-button.primary.sc-xplor-button:hover {\n background-color: var(--color-primary-50, #e3f2fd);\n border-color: var(--color-primary-50, #e3f2fd);\n color: white;\n}\n.x-button.secondary.sc-xplor-button {\n background-color: var(--color-secondary);\n border-color: var(--color-secondary);\n color: white;\n}\n.x-button.secondary.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n border-color: var(--color-secondary-50, #f3e5f5);\n color: white;\n}\n.x-button.ghost.sc-xplor-button {\n background-color: #fff;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:hover {\n background-color: #DFF2F1;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:active {\n background-color: #BEE6E4;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.minimal.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n}\n.x-button.success.sc-xplor-button {\n background-color: transparent;\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:hover {\n background-color: var(--color-success-50, #e8f5e9);\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:active {\n background-color: var(--color-success-100, #c8e6c9);\n}\n.x-button.text.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-secondary);\n}\n.x-button.text.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n}\n.x-button.text.sc-xplor-button:active {\n background-color: var(--color-secondary-100, #e1bee7);\n}\n.x-button.disabled.sc-xplor-button {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n}\n\n.icon.sc-xplor-button {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n.x-button--icon-only.small.sc-xplor-button {\n width: 36px;\n height: 36px;\n padding: 0.25rem;\n}\n.x-button--icon-only.small.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 16px;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button {\n padding: 0.25rem;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 16px;\n height: 16px;\n}\n.x-button--icon-only.large.sc-xplor-button {\n width: 56px;\n height: 56px;\n}\n.x-button--icon-only.large.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 24px;\n}\n\n.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {\n cursor: not-allowed;\n opacity: 0.6;\n}";
3
+ const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-button {\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-button {\n width: 600px !important;\n }\n}\nh1.sc-xplor-button {\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-button {\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-button {\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-button {\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-button, ul.sc-xplor-button {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-button li.sc-xplor-button, ul.sc-xplor-button li.sc-xplor-button {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-button, ul.mdc-list.sc-xplor-button {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-button {\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-button {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-button {\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-button {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-button .mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\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-button .mdc-notched-outline__notch.sc-xplor-button {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-button {\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-button:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-button {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-button {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-button {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-button {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-button {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-button {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-button {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-button {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-button {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-button {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-button {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-button {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-button {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-button {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-button {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-button {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-button {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-button {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-button {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-button {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-button {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-button {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-button {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-button {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-button {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-button {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-button {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-button {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-button {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-button {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-button {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-button {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-button {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-button {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-button {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-button {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-button {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-button {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-button {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-button {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-button {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-button {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-button {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-button {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-button {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-button {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-button {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-button {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-button {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-button {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-button {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-button {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-button {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-button {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-button {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-button {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-button {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-button {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-button {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-button {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-button {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-button {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-button {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-button {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-button {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-button {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-button {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-button {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-button {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-button {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-button {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-button {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-button {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-button {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-button {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-button {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-button {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-button {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-button {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-button {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-button {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-button {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-button {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-button {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-button {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-button {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-button {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-button {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-button {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-button {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-button {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-button {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-button {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-button {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-button {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-button {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-button {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-button {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-button {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-button {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-button {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-button {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-button {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-button {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-button {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-button {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-button {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-button {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-button {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-button {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-button {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-button {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-button {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-button {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-button {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-button {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-button {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-button {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-button {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-button {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-button {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-button {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-button {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-button {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-button {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-button {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-button {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-button {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-button {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-button {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-button {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-button {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-button {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-button {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-button {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-button {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-button {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-button {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-button {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-button {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-button {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-button {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-button {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-button {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-button {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-button {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-button {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-button {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-button {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-button {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-button {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-button {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-button {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-button {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-button {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-button {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-button {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-button {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-button {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-button {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-button {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-button {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-button {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-button {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-button {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-button {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-button {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-button {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-button {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-button {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-button {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-button {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-button {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-button {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-button {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-button {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-button {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-button {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-button {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-button {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-button {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-button {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-button {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-button-h {\n display: block;\n}\n\n.x-button--full-width.sc-xplor-button-h {\n width: 100%;\n}\n\n.x-button--full-width.sc-xplor-button {\n width: 100%;\n}\n\n.x-button.sc-xplor-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: 0.75rem 1.5rem;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n}\n.x-button.x-button--icon-only.sc-xplor-button {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 1rem;\n height: 1rem;\n display: block;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon.sc-xplor-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n}\n.x-button.x-button--with-icon.x-button--icon-start.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-right: 0.5rem;\n}\n.x-button.x-button--with-icon.x-button--icon-end.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-left: 0.5rem;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n display: block;\n width: 14px;\n height: 14px;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button path.sc-xplor-button {\n fill: currentColor;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-text.sc-xplor-button {\n line-height: 1;\n}\n.x-button.x-button--icon-start.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.x-button--icon-end.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.primary.sc-xplor-button {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: white;\n}\n.x-button.primary.sc-xplor-button:hover {\n background-color: var(--color-primary-50, #e3f2fd);\n border-color: var(--color-primary-50, #e3f2fd);\n color: white;\n}\n.x-button.secondary.sc-xplor-button {\n background-color: var(--color-secondary);\n border-color: var(--color-secondary);\n color: white;\n}\n.x-button.secondary.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n border-color: var(--color-secondary-50, #f3e5f5);\n color: white;\n}\n.x-button.tertiary.sc-xplor-button {\n background-color: var(--color-tertiary, rgb(219, 59, 3));\n border-color: var(--color-tertiary, rgb(219, 59, 3));\n color: white;\n}\n.x-button.tertiary.sc-xplor-button:hover {\n background-color: rgba(219, 59, 3, 0.85);\n border-color: rgba(219, 59, 3, 0.85);\n color: white;\n}\n.x-button.ghost.sc-xplor-button {\n background-color: #fff;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:hover {\n background-color: #DFF2F1;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:active {\n background-color: #BEE6E4;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.minimal.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n}\n.x-button.success.sc-xplor-button {\n background-color: transparent;\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:hover {\n background-color: var(--color-success-50, #e8f5e9);\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:active {\n background-color: var(--color-success-100, #c8e6c9);\n}\n.x-button.text.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-secondary);\n}\n.x-button.text.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n}\n.x-button.text.sc-xplor-button:active {\n background-color: var(--color-secondary-100, #e1bee7);\n}\n.x-button.disabled.sc-xplor-button {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n}\n\n.icon.sc-xplor-button {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n.x-button--icon-only.small.sc-xplor-button {\n width: 36px;\n height: 36px;\n padding: 0.25rem;\n}\n.x-button--icon-only.small.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 16px;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button {\n padding: 0.25rem;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 16px;\n height: 16px;\n}\n.x-button--icon-only.large.sc-xplor-button {\n width: 56px;\n height: 56px;\n}\n.x-button--icon-only.large.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 24px;\n}\n\n.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {\n cursor: not-allowed;\n opacity: 0.6;\n}";
4
4
 
5
5
  const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H {
6
6
  constructor() {
@@ -35,7 +35,7 @@ const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H
35
35
  const isFullWidth = this.fullWidth || this.fullWidthAttr;
36
36
  const isIconOnly = !this.text && this.iconPosition !== null;
37
37
  const hasIcon = this.iconPosition !== null;
38
- return (h(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, h("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
38
+ return (h(Host, { key: 'd338a1b17a25fc843820a5dde83a38663a6ebb2e', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: '5a6e640c188b9b9e1165add358cb71b97c319dd0' }, h("button", { key: 'c699bebecfac65bb0705f6397891afe22105b12c', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: 'd830e09d660f0260e83a4eca4cf41ab49aa4a490', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
39
39
  }
40
40
  static get style() { return xplorButtonCss; }
41
41
  }, [6, "xplor-button", {
@@ -69,6 +69,6 @@ function defineCustomElement() {
69
69
  defineCustomElement();
70
70
 
71
71
  export { XplorButton as X, defineCustomElement as d };
72
- //# sourceMappingURL=p-hygTyb6H.js.map
72
+ //# sourceMappingURL=p-BCTIARwU.js.map
73
73
 
74
- //# sourceMappingURL=p-hygTyb6H.js.map
74
+ //# sourceMappingURL=p-BCTIARwU.js.map
package/dist/components/p-BCTIARwU.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"p-BCTIARwU.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g9wBAAg9wB;;MCe19wB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAbxB,IAAA,WAAA,GAAA;;;AAeU,QAAA,IAAI,CAAA,IAAA,GAAiG,WAAW;AAChH,QAAA,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC;;AAMvC,QAAA,IAAS,CAAA,SAAA,GAAkB,IAAI;;AAG/B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGR,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;;AAGjB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAEhE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAA2B,IAAI;AAEnD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AAiD3B;IA9CS,UAAU,GAAA;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAS;;AAGhF,QAAA,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACtB,EAAA,IAAI,CAAC,IAAI,CACL;;IAIX,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa;AACxD,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI;AAC3D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI;QAE1C,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,WAAW,EAAE,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,kBACH,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EACjB,sBAAsB,EAAE,WAAW,EACnC,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,EAAA,GAC5D,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,EAEhD,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,EAAA,YAAA,EACzC,IAAI,CAAC,SAAS,EACX,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,EAC7D,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,IAAI,CAAQ,EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CACrD,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-button/xplor-button.scss?tag=xplor-button&encapsulation=scoped","src/components/xplor-button/xplor-button.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours-pg;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n:host(.x-button--full-width) {\n width: 100%;\n}\n\n.x-button--full-width {\n width: 100%;\n}\n\n.x-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: spacing.$spacing-12 spacing.$spacing-24;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition:\n background-color 0.2s,\n border-color 0.2s,\n color 0.2s;\n transition:\n background-color 0.2s,\n border-color 0.2s,\n color 0.2s;\n\n // Icon Only Button (Circular)\n &.x-button--icon-only {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .button-icon {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.button-icon--svg {\n svg {\n width: spacing.$spacing-16;\n height: spacing.$spacing-16;\n display: block;\n }\n }\n }\n }\n\n // Regular Button with Icon\n &.x-button--with-icon {\n .button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n }\n\n // SVG icon styles\n &.x-button--icon-start {\n .button-icon--svg {\n margin-right: spacing.$spacing-8 ;\n }\n }\n\n &.x-button--icon-end {\n .button-icon--svg {\n margin-left: spacing.$spacing-8 ;\n }\n }\n\n .button-icon--svg {\n\n\n svg {\n display: block;\n width: 14px;\n height: 14px;\n\n\n path {\n fill: currentColor;\n }\n }\n }\n\n .button-text {\n line-height: 1;\n }\n }\n\n // Icon positioning\n &.x-button--icon-start {\n flex-direction: row;\n }\n\n &.x-button--icon-end {\n flex-direction: row;\n }\n\n &.primary {\n background-color: colours-pg.$primary;\n border-color: colours-pg.$primary;\n color: white;\n\n &:hover {\n background-color: colours-pg.$primary-50;\n border-color: colours-pg.$primary-50;\n color: white;\n }\n }\n\n &.secondary {\n background-color: colours-pg.$secondary;\n border-color: colours-pg.$secondary;\n color: white;\n\n &:hover {\n background-color: colours-pg.$secondary-50;\n border-color: colours-pg.$secondary-50;\n color: white;\n ;\n }\n }\n\n &.tertiary {\n background-color: colours-pg.$tertiary;\n border-color: colours-pg.$tertiary;\n color: white;\n\n &:hover {\n background-color: rgba(219, 59, 3, 0.85);\n border-color: rgba(219, 59, 3, 0.85);\n color: white;\n }\n }\n\n &.ghost {\n background-color: #fff;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n &:hover {\n background-color: #DFF2F1;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n }\n\n &:active {\n background-color: #BEE6E4;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n }\n }\n\n &.minimal {\n background-color: transparent;\n border-color: transparent;\n color: colours-pg.$primary;\n }\n\n &.success {\n background-color: transparent;\n border-color: colours-pg.$success;\n color: colours-pg.$success;\n\n &:hover {\n background-color: colours-pg.$success-50;\n border-color: colours-pg.$success;\n color: colours-pg.$success;\n }\n\n &:active {\n background-color: colours-pg.$success-100;\n }\n }\n\n &.text {\n background-color: transparent;\n border-color: transparent;\n color: colours-pg.$secondary;\n\n &:hover {\n background-color: colours-pg.$secondary-50;\n }\n\n &:active {\n background-color: colours-pg.$secondary-100;\n }\n }\n\n &.disabled {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n }\n}\n\n.icon {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n// Size variations for icon-only buttons\n.x-button--icon-only {\n &.small {\n width: 36px;\n height: 36px;\n padding: spacing.$spacing-4;\n\n .button-icon {\n font-size: 16px;\n }\n }\n\n &.button-icon--svg {\n padding: spacing.$spacing-4;\n\n svg {\n width: 16px;\n height: 16px;\n\n }\n }\n\n &.large {\n width: 56px;\n height: 56px;\n\n .button-icon {\n font-size: 24px;\n }\n }\n}\n\n// Ensure disabled state works with icon buttons\n.x-button.disabled {\n\n &.x-button--icon-only,\n &.x-button--with-icon {\n cursor: not-allowed;\n opacity: 0.6;\n }\n}","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' | 'tertiary' | '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 /** Accessible label for icon-only buttons */\n @Prop() ariaLabel: string | null = null;\n\n /** Whether the button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether the button stretches to full width of its container */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */\n @Prop({ attribute: 'fullwidth' }) fullWidthAttr: boolean = false;\n\n /**\n * Icon position: 'start' | 'end' | null\n */\n @Prop() iconPosition: 'start' | 'end' | null = 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 isFullWidth = this.fullWidth || this.fullWidthAttr;\n const isIconOnly = !this.text && this.iconPosition !== null;\n const hasIcon = this.iconPosition !== null;\n\n return (\n <Host class={{ 'x-button--full-width': isFullWidth }}>\n <slot>\n <button\n role=\"button\"\n class={{\n 'x-button': true,\n [this.type]: true,\n 'x-button--full-width': isFullWidth,\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 aria-label={this.ariaLabel}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\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}"],"version":3}
package/dist/components/xplor-btn-tooltip.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$3 } from './p-hygTyb6H.js';
2
+ import { d as defineCustomElement$3 } from './p-BCTIARwU.js';
3
3
  import { d as defineCustomElement$2 } from './p-09-DxgmY.js';
4
4
 
5
5
  const xplorBtnTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-btn-tooltip {\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-btn-tooltip {\n width: 600px !important;\n }\n}\nh1.sc-xplor-btn-tooltip {\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-btn-tooltip {\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-btn-tooltip {\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-btn-tooltip {\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-btn-tooltip, ul.sc-xplor-btn-tooltip {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-tooltip {\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-btn-tooltip {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-tooltip {\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-btn-tooltip {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-tooltip .mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\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-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-tooltip {\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-btn-tooltip:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-tooltip {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-tooltip-h {\n display: inline-block;\n}";
package/dist/components/xplor-button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { X as XplorButton$1, d as defineCustomElement$1 } from './p-hygTyb6H.js';
1
+ import { X as XplorButton$1, d as defineCustomElement$1 } from './p-BCTIARwU.js';
2
2
 
3
3
  const XplorButton = XplorButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/xplor-chat-widget.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$3 } from './p-hygTyb6H.js';
2
+ import { d as defineCustomElement$3 } from './p-BCTIARwU.js';
3
3
  import { d as defineCustomElement$2 } from './p-DvCXOu5j.js';
4
4
 
5
5
  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(0, 119, 107);\n --color-secondary: rgb(128, 104, 186);\n --color-buttons: #89da59;\n --color-typography: #ff320e;\n }\n\n html {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgb(0, 119, 107);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgb(128, 104, 186);\n --color-tertiary: rgb(219, 59, 3);\n } */\n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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}";
package/dist/components/xplor-drag-and-drop-input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-hygTyb6H.js';
2
+ import { d as defineCustomElement$2 } from './p-BCTIARwU.js';
3
3
 
4
4
  const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-primary-50, #e3f2fd);\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-primary);\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-primary);\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-primary);\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}";
5
5
 
package/dist/components/xplor-input-send.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-hygTyb6H.js';
2
+ import { d as defineCustomElement$2 } from './p-BCTIARwU.js';
3
3
 
4
4
  const xplorInputSendCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-input-send {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-input-send {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-send {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-input-send {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-send {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-input-send {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-input-send, ul.sc-xplor-input-send {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-send li.sc-xplor-input-send, ul.sc-xplor-input-send li.sc-xplor-input-send {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-send, ul.mdc-list.sc-xplor-input-send {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-send li.mdc-list-item.sc-xplor-input-send, ul.mdc-list.sc-xplor-input-send li.mdc-list-item.sc-xplor-input-send {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-send {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-send {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-send {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-send {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-send .mdc-text-field--outlined.sc-xplor-input-send .mdc-notched-outline__notch.sc-xplor-input-send {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-send .mdc-notched-outline__notch.sc-xplor-input-send {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-send .mdc-notched-outline.sc-xplor-input-send .mdc-notched-outline__notch.sc-xplor-input-send {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-send {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-send:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-send {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-send-h {\n display: block;\n width: 100%;\n}\n\n.input-send.sc-xplor-input-send {\n display: flex;\n gap: 0.5rem;\n align-items: stretch;\n width: 100%;\n}\n.input-send--disabled.sc-xplor-input-send {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.input-send__input.sc-xplor-input-send {\n flex: 1;\n padding: 0.75rem 1rem;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n font-family: inherit;\n font-size: 1rem;\n line-height: 1.5;\n color: #212121;\n background-color: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n}\n.input-send__input.sc-xplor-input-send:focus {\n outline: none;\n border-color: #1976d2;\n box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.input-send__input.sc-xplor-input-send::placeholder {\n color: #9e9e9e;\n}\n.input-send__input.sc-xplor-input-send:disabled {\n background-color: #f5f5f5;\n cursor: not-allowed;\n}\n\n.input-send__button.sc-xplor-input-send {\n flex-shrink: 0;\n}";
5
5
 
package/dist/esm/xplor-alert-dialog_60.entry.js CHANGED
@@ -1782,7 +1782,7 @@ const XplorBtnTooltip = class {
1782
1782
  };
1783
1783
  XplorBtnTooltip.style = xplorBtnTooltipCss;
1784
1784
 
1785
- const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-button {\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-button {\n width: 600px !important;\n }\n}\nh1.sc-xplor-button {\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-button {\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-button {\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-button {\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-button, ul.sc-xplor-button {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-button li.sc-xplor-button, ul.sc-xplor-button li.sc-xplor-button {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-button, ul.mdc-list.sc-xplor-button {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-button {\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-button {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-button {\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-button {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-button .mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\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-button .mdc-notched-outline__notch.sc-xplor-button {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-button {\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-button:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-button {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-button {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-button {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-button {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-button {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-button {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-button {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-button {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-button {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-button {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-button {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-button {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-button {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-button {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-button {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-button {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-button {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-button {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-button {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-button {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-button {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-button {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-button {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-button {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-button {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-button {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-button {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-button {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-button {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-button {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-button {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-button {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-button {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-button {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-button {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-button {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-button {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-button {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-button {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-button {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-button {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-button {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-button {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-button {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-button {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-button {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-button {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-button {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-button {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-button {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-button {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-button {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-button {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-button {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-button {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-button {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-button {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-button {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-button {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-button {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-button {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-button {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-button {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-button {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-button {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-button {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-button {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-button {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-button {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-button {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-button {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-button {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-button {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-button {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-button {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-button {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-button {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-button {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-button {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-button {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-button {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-button {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-button {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-button {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-button {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-button {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-button {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-button {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-button {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-button {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-button {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-button {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-button {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-button {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-button {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-button {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-button {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-button {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-button {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-button {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-button {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-button {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-button {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-button {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-button {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-button {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-button {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-button {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-button {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-button {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-button {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-button {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-button {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-button {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-button {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-button {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-button {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-button {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-button {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-button {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-button {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-button {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-button {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-button {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-button {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-button {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-button {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-button {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-button {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-button {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-button {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-button {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-button {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-button {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-button {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-button {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-button {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-button {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-button {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-button {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-button {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-button {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-button {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-button {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-button {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-button {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-button {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-button {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-button {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-button {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-button {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-button {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-button {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-button {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-button {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-button {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-button {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-button {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-button {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-button {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-button {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-button {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-button {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-button {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-button {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-button {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-button {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-button {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-button {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-button {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-button {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-button {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-button {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-button {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-button {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-button {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-button {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-button {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-button {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-button {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-button {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-button {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-button {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-button-h {\n display: block;\n}\n\n.x-button--full-width.sc-xplor-button-h {\n width: 100%;\n}\n\n.x-button--full-width.sc-xplor-button {\n width: 100%;\n}\n\n.x-button.sc-xplor-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: 0.75rem 1.5rem;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n}\n.x-button.x-button--icon-only.sc-xplor-button {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 1rem;\n height: 1rem;\n display: block;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon.sc-xplor-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n}\n.x-button.x-button--with-icon.x-button--icon-start.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-right: 0.5rem;\n}\n.x-button.x-button--with-icon.x-button--icon-end.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-left: 0.5rem;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n display: block;\n width: 14px;\n height: 14px;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button path.sc-xplor-button {\n fill: currentColor;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-text.sc-xplor-button {\n line-height: 1;\n}\n.x-button.x-button--icon-start.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.x-button--icon-end.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.primary.sc-xplor-button {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: white;\n}\n.x-button.primary.sc-xplor-button:hover {\n background-color: var(--color-primary-50, #e3f2fd);\n border-color: var(--color-primary-50, #e3f2fd);\n color: white;\n}\n.x-button.secondary.sc-xplor-button {\n background-color: var(--color-secondary);\n border-color: var(--color-secondary);\n color: white;\n}\n.x-button.secondary.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n border-color: var(--color-secondary-50, #f3e5f5);\n color: white;\n}\n.x-button.ghost.sc-xplor-button {\n background-color: #fff;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:hover {\n background-color: #DFF2F1;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:active {\n background-color: #BEE6E4;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.minimal.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n}\n.x-button.success.sc-xplor-button {\n background-color: transparent;\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:hover {\n background-color: var(--color-success-50, #e8f5e9);\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:active {\n background-color: var(--color-success-100, #c8e6c9);\n}\n.x-button.text.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-secondary);\n}\n.x-button.text.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n}\n.x-button.text.sc-xplor-button:active {\n background-color: var(--color-secondary-100, #e1bee7);\n}\n.x-button.disabled.sc-xplor-button {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n}\n\n.icon.sc-xplor-button {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n.x-button--icon-only.small.sc-xplor-button {\n width: 36px;\n height: 36px;\n padding: 0.25rem;\n}\n.x-button--icon-only.small.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 16px;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button {\n padding: 0.25rem;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 16px;\n height: 16px;\n}\n.x-button--icon-only.large.sc-xplor-button {\n width: 56px;\n height: 56px;\n}\n.x-button--icon-only.large.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 24px;\n}\n\n.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {\n cursor: not-allowed;\n opacity: 0.6;\n}";
1785
+ const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\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-button {\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-button {\n width: 600px !important;\n }\n}\nh1.sc-xplor-button {\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-button {\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-button {\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-button {\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-button, ul.sc-xplor-button {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-button li.sc-xplor-button, ul.sc-xplor-button li.sc-xplor-button {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-button, ul.mdc-list.sc-xplor-button {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-button {\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-button {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-button {\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-button {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-button .mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\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-button .mdc-notched-outline__notch.sc-xplor-button {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-button {\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-button:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-button {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-button {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-button {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-button {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-button {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-button {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-button {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-button {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-button {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-button {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-button {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-button {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-button {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-button {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-button {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-button {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-button {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-button {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-button {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-button {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-button {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-button {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-button {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-button {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-button {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-button {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-button {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-button {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-button {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-button {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-button {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-button {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-button {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-button {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-button {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-button {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-button {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-button {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-button {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-button {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-button {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-button {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-button {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-button {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-button {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-button {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-button {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-button {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-button {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-button {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-button {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-button {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-button {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-button {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-button {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-button {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-button {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-button {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-button {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-button {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-button {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-button {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-button {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-button {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-button {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-button {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-button {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-button {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-button {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-button {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-button {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-button {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-button {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-button {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-button {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-button {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-button {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-button {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-button {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-button {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-button {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-button {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-button {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-button {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-button {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-button {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-button {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-button {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-button {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-button {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-button {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-button {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-button {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-button {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-button {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-button {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-button {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-button {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-button {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-button {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-button {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-button {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-button {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-button {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-button {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-button {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-button {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-button {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-button {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-button {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-button {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-button {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-button {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-button {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-button {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-button {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-button {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-button {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-button {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-button {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-button {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-button {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-button {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-button {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-button {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-button {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-button {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-button {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-button {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-button {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-button {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-button {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-button {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-button {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-button {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-button {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-button {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-button {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-button {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-button {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-button {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-button {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-button {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-button {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-button {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-button {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-button {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-button {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-button {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-button {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-button {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-button {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-button {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-button {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-button {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-button {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-button {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-button {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-button {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-button {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-button {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-button {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-button {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-button {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-button {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-button {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-button {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-button {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-button {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-button {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-button {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-button {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-button {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-button {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-button {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-button {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-button {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-button {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-button {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-button {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-button {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-button {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-button {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-button-h {\n display: block;\n}\n\n.x-button--full-width.sc-xplor-button-h {\n width: 100%;\n}\n\n.x-button--full-width.sc-xplor-button {\n width: 100%;\n}\n\n.x-button.sc-xplor-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: 0.75rem 1.5rem;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n}\n.x-button.x-button--icon-only.sc-xplor-button {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 1rem;\n height: 1rem;\n display: block;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon.sc-xplor-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n}\n.x-button.x-button--with-icon.x-button--icon-start.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-right: 0.5rem;\n}\n.x-button.x-button--with-icon.x-button--icon-end.sc-xplor-button .button-icon--svg.sc-xplor-button {\n margin-left: 0.5rem;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n display: block;\n width: 14px;\n height: 14px;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button path.sc-xplor-button {\n fill: currentColor;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-text.sc-xplor-button {\n line-height: 1;\n}\n.x-button.x-button--icon-start.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.x-button--icon-end.sc-xplor-button {\n flex-direction: row;\n}\n.x-button.primary.sc-xplor-button {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: white;\n}\n.x-button.primary.sc-xplor-button:hover {\n background-color: var(--color-primary-50, #e3f2fd);\n border-color: var(--color-primary-50, #e3f2fd);\n color: white;\n}\n.x-button.secondary.sc-xplor-button {\n background-color: var(--color-secondary);\n border-color: var(--color-secondary);\n color: white;\n}\n.x-button.secondary.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n border-color: var(--color-secondary-50, #f3e5f5);\n color: white;\n}\n.x-button.tertiary.sc-xplor-button {\n background-color: var(--color-tertiary, rgb(219, 59, 3));\n border-color: var(--color-tertiary, rgb(219, 59, 3));\n color: white;\n}\n.x-button.tertiary.sc-xplor-button:hover {\n background-color: rgba(219, 59, 3, 0.85);\n border-color: rgba(219, 59, 3, 0.85);\n color: white;\n}\n.x-button.ghost.sc-xplor-button {\n background-color: #fff;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:hover {\n background-color: #DFF2F1;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:active {\n background-color: #BEE6E4;\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n}\n.x-button.minimal.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n}\n.x-button.success.sc-xplor-button {\n background-color: transparent;\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:hover {\n background-color: var(--color-success-50, #e8f5e9);\n border-color: var(--color-success, #4caf50);\n color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:active {\n background-color: var(--color-success-100, #c8e6c9);\n}\n.x-button.text.sc-xplor-button {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-secondary);\n}\n.x-button.text.sc-xplor-button:hover {\n background-color: var(--color-secondary-50, #f3e5f5);\n}\n.x-button.text.sc-xplor-button:active {\n background-color: var(--color-secondary-100, #e1bee7);\n}\n.x-button.disabled.sc-xplor-button {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n}\n\n.icon.sc-xplor-button {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n.x-button--icon-only.small.sc-xplor-button {\n width: 36px;\n height: 36px;\n padding: 0.25rem;\n}\n.x-button--icon-only.small.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 16px;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button {\n padding: 0.25rem;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n width: 16px;\n height: 16px;\n}\n.x-button--icon-only.large.sc-xplor-button {\n width: 56px;\n height: 56px;\n}\n.x-button--icon-only.large.sc-xplor-button .button-icon.sc-xplor-button {\n font-size: 24px;\n}\n\n.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {\n cursor: not-allowed;\n opacity: 0.6;\n}";
1786
1786
 
1787
1787
  const XplorButton = class {
1788
1788
  constructor(hostRef) {
@@ -1816,7 +1816,7 @@ const XplorButton = class {
1816
1816
  const isFullWidth = this.fullWidth || this.fullWidthAttr;
1817
1817
  const isIconOnly = !this.text && this.iconPosition !== null;
1818
1818
  const hasIcon = this.iconPosition !== null;
1819
- return (h(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, h("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
1819
+ return (h(Host, { key: 'd338a1b17a25fc843820a5dde83a38663a6ebb2e', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: '5a6e640c188b9b9e1165add358cb71b97c319dd0' }, h("button", { key: 'c699bebecfac65bb0705f6397891afe22105b12c', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, '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(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: 'd830e09d660f0260e83a4eca4cf41ab49aa4a490', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
1820
1820
  }
1821
1821
  };
1822
1822
  XplorButton.style = xplorButtonCss;