@xplor-education/core-stencil-components 2.0.0

package/components/p-B1W2qj2l.js

@@ -0,0 +1,50 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorAvatarCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}";
+
+const XplorAvatar = /*@__PURE__*/ proxyCustomElement(class XplorAvatar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // eslint-disable-next-line @stencil/required-jsdoc
+        this.disabled = false;
+    }
+    render() {
+        let className = 'xpl-avatar';
+        if (this.size)
+            className += ` xpl-avatar--${this.size}`;
+        if (this.color)
+            className += ` xpl-avatar--${this.color}`;
+        const inner = (h("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" }, h("slot", null))), this.status && h("div", { key: '1367e8fccd661b566d95cb1bf3a20467be7bc40f', class: `xpl-avatar__dot--${this.status}` })));
+        return (h(Host, { key: 'ac12deb4b322146d75c650ba0abe6d96c35efd67' }, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (h("div", { class: className }, inner))));
+    }
+    static get style() { return xplorAvatarCss; }
+}, [1, "xplor-avatar", {
+        "color": [1],
+        "disabled": [4],
+        "href": [1],
+        "name": [1],
+        "size": [1],
+        "src": [1],
+        "status": [1],
+        "target": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorAvatar);
+            }
+            break;
+    } });
+}
+
+export { XplorAvatar as X, defineCustomElement as d };
+//# sourceMappingURL=p-B1W2qj2l.js.map
+
+//# sourceMappingURL=p-B1W2qj2l.js.map

package/components/p-B1W2qj2l.js.map

@@ -0,0 +1 @@
+{"file":"p-B1W2qj2l.js","mappings":";;AAAA,MAAM,cAAc,GAAG,mnNAAmnN;;MCO7nN,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAiDnC;IAhCC,MAAM,GAAA;QACJ,IAAI,SAAS,GAAG,YAAY;QAC5B,IAAI,IAAI,CAAC,IAAI;AAAE,YAAA,SAAS,IAAI,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,EAAE;QACvD,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,SAAS,IAAI,CAAgB,aAAA,EAAA,IAAI,CAAC,KAAK,EAAE;AAEzD,QAAA,MAAM,KAAK,IACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,GAAG,IACP,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAA,CAAI,KAEtC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,CACP,EACA,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAQ,CAAA,CACjE,CACP;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC1B,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EACtD,EAAA,KAAK,CACJ,IACF,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,SAAS,GAAG,uBAAuB,EAAG,EAAA,KAAK,CAAO,KAE9D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,SAAS,IAAG,KAAK,CAAO,CACrC,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-avatar/xplor-avatar.scss?tag=xplor-avatar&encapsulation=shadow","src/components/xplor-avatar/xplor-avatar.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-avatar',\n  styleUrl: 'xplor-avatar.scss',\n  shadow: true,\n})\nexport class XplorAvatar {\n  /** Background color when there is no image src */\n  @Prop() color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';\n  // eslint-disable-next-line @stencil/required-jsdoc\n  @Prop() disabled?: boolean = false;\n  /** The URL if the avatar should be hyperlinked */\n  @Prop() href?: string;\n  /** Alt text for the image if there is an image src */\n  @Prop() name?: string;\n  /** Size of the avatar */\n  @Prop() size?: 'md' | 'sm';\n  /** The image URL */\n  @Prop() src?: string;\n  /** Color styles for the dot indicator to indicate varied states */\n  @Prop() status?: 'active' | 'warning' | 'inactive';\n  /**\n   * Where to open the URL chosen for the `href` prop:\n   * `_self` (default), `_blank`, `_parent`, or `_top`\n   */\n  @Prop() target?: string;\n\n  render() {\n    let className = 'xpl-avatar';\n    if (this.size) className += ` xpl-avatar--${this.size}`;\n    if (this.color) className += ` xpl-avatar--${this.color}`;\n\n    const inner = (\n      <div>\n        {this.src ? (\n          <img alt={this.name} src={this.src} />\n        ) : (\n          <div class=\"xpl-avatar__placeholder\">\n            <slot></slot>\n          </div>\n        )}\n        {this.status && <div class={`xpl-avatar__dot--${this.status}`}></div>}\n      </div>\n    );\n\n    return (\n      <Host>\n        {this.href && !this.disabled ? (\n          <a href={this.href} class={className} target={this.target}>\n            {inner}\n          </a>\n        ) : this.href && this.disabled ? (\n          <div class={className + ' xpl-avatar--disabled'}>{inner}</div>\n        ) : (\n          <div class={className}>{inner}</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-BK_ATKuB.js

@@ -0,0 +1,37 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorDropdownCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}\n\n.xplor-dropdown {\n  display: block;\n  cursor: pointer;\n  margin-right: 10px;\n  border: 1px solid;\n  border-radius: 1rem;\n  font-size: 14px;\n  font-weight: 500;\n  -webkit-box-pack: center;\n  letter-spacing: 0.75px;\n  height: 45px;\n  text-align: center;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}";
+
+const XplorDropdown = /*@__PURE__*/ proxyCustomElement(class XplorDropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'a4c0fd10eb0727179e89fd8d5065a679631c8df8' }, h("select", { key: '251713d910a1eda1bf6935c138b91e1a946afb6c', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
+    }
+    static get style() { return xplorDropdownCss; }
+}, [1, "xplor-dropdown", {
+        "options": [16],
+        "selected": [1],
+        "handleChange": [16, "handle-change"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorDropdown);
+            }
+            break;
+    } });
+}
+
+export { XplorDropdown as X, defineCustomElement as d };
+//# sourceMappingURL=p-BK_ATKuB.js.map
+
+//# sourceMappingURL=p-BK_ATKuB.js.map

package/components/p-BK_ATKuB.js.map

@@ -0,0 +1 @@
+{"file":"p-BK_ATKuB.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,66NAA66N;;MCOz7N,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;IAKxB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gBAAgB,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,IACvD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAA,EACtD,MAAM,CACA,CACV,CAAC,CACK,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-dropdown/xplor-dropdown.scss?tag=xplor-dropdown&encapsulation=shadow","src/components/xplor-dropdown/xplor-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-dropdown {\n  display: block;\n  cursor: pointer;\n  margin-right: 10px;\n  border: 1px solid;\n  border-radius: 1rem;\n  font-size: 14px;\n  font-weight: 500;\n  -webkit-box-pack: center;\n  letter-spacing: 0.75px;\n  height: 45px;\n  text-align: center;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-dropdown',\n  styleUrl: 'xplor-dropdown.scss',\n  shadow: true,\n})\nexport class XplorDropdown {\n  @Prop() options: string[];\n  @Prop() selected: string;\n  @Prop() handleChange: (event: Event) => void;\n\n  render() {\n    return (\n      <Host>\n        <select class=\"xplor-dropdown\" onChange={this.handleChange}>\n          {this.options.map((option) => (\n            <option value={option} selected={this.selected === option}>\n              {option}\n            </option>\n          ))}\n        </select>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CBSi5kQB.js

@@ -0,0 +1,56 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-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.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.shadow.sc-xplor-button {\n  box-shadow: 0px 2.30969px 4.25707px rgba(20, 20, 21, 0.28), 0px 6.38599px 11.7703px rgba(20, 20, 21, 0.0521271), 0px 15.375px 28.3382px rgba(20, 20, 21, 0.04), 0px 32px 94px rgba(20, 20, 21, 0.0278729);\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}";
+
+const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.type = 'secondary';
+        this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
+        /**
+         * Icon to display (defaults to plus sign)
+         */
+        this.icon = '+';
+    }
+    renderIcon() {
+        if (this.icon === 'svg' && this.iconSvg) {
+            return (h("span", { class: "button-icon button-icon--svg ", innerHTML: this.iconSvg }));
+        }
+        return (h("span", { class: "button-icon" }, this.icon));
+    }
+    render() {
+        const isIconOnly = !this.text && this.iconPosition !== null;
+        const hasIcon = this.iconPosition !== null;
+        return (h(Host, { key: '94fed7b7f39f8aca0273d5b6da123e1ce7d87d01' }, h("slot", { key: 'fd6a53ce8ce00175207dff16d976379a0ab8040b' }, h("button", { key: 'a688aabc8675ef63f3c18c2af4b0a24c8bc29de7', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'shadow': this.type !== 'minimal' && this.type !== 'text', 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction() }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '82d9558a551bcc23ead90b3f42d0fcd94bd7301f', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+    }
+    static get style() { return xplorButtonCss; }
+}, [6, "xplor-button", {
+        "text": [1],
+        "type": [1],
+        "mode": [1],
+        "size": [1],
+        "styles": [1],
+        "clickAction": [16, "click-action"],
+        "iconPosition": [1, "icon-position"],
+        "icon": [1],
+        "iconSvg": [1, "icon-svg"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorButton);
+            }
+            break;
+    } });
+}
+
+export { XplorButton as X, defineCustomElement as d };
+//# sourceMappingURL=p-CBSi5kQB.js.map
+
+//# sourceMappingURL=p-CBSi5kQB.js.map

package/components/p-CBSi5kQB.js.map

@@ -0,0 +1 @@
+{"file":"p-CBSi5kQB.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kywBAAkywB;;MCe5ywB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAbxB,IAAA,WAAA,GAAA;;;AAeU,QAAA,IAAI,CAAA,IAAA,GAAoF,WAAW;AACnG,QAAA,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC;AAU/C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AA6C3B;IA1CS,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;AACJ,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,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EACH,MAAA,CAAA,MAAA,CAAA,EAAA,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACzD,qBAAqB,EAAE,UAAU,EACjC,qBAAqB,EAAE,OAAO,IAAI,CAAC,UAAU,EAC7C,sBAAsB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,CAAC,UAAU,EACpE,oBAAoB,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,CAAC,UAAU,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,EAEpD,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.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  &.shadow {\n    box-shadow:\n      0px 2.30969px 4.25707px rgba(20, 20, 21, 0.28),\n      0px 6.38599px 11.7703px rgba(20, 20, 21, 0.0521271),\n      0px 15.375px 28.3382px rgba(20, 20, 21, 0.04),\n      0px 32px 94px rgba(20, 20, 21, 0.0278729);\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  &.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' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n  @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n  @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n  @Prop() styles?: string;\n  @Prop() clickAction: () => void;\n\n  /**\n   * Icon position: 'start' | 'end' | null\n   */\n  @Prop() iconPosition: 'start' | 'end' | null;\n\n  /**\n   * Icon to display (defaults to plus sign)\n   */\n  @Prop() icon: string = '+';\n  @Prop() iconSvg?: string;\n\n  private renderIcon() {\n    if (this.icon === 'svg' && this.iconSvg) {\n      return (\n        <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n      );\n    }\n    return (\n      <span class=\"button-icon\">\n        {this.icon}\n      </span>\n    );\n  }\n\n  render() {\n    const isIconOnly = !this.text && this.iconPosition !== null;\n    const hasIcon = this.iconPosition !== null;\n\n    return (\n      <Host>\n        <slot>\n          <button\n            role=\"button\"\n            class={{\n              'x-button': true,\n              [this.type]: true,\n              'shadow': this.type !== 'minimal' && this.type !== 'text',\n              'x-button--icon-only': isIconOnly,\n              'x-button--with-icon': hasIcon && !isIconOnly,\n              'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n              'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n              ...(this.styles ? { [this.styles]: true } : {}),\n            }}\n            onClick={() => this.clickAction && this.clickAction()}\n          >\n            {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n            {this.text && <span class=\"button-text\">{this.text}</span>}\n            {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n          </button>\n        </slot>\n      </Host>\n    );\n  }\n}"],"version":3}

package/components/p-CTD6SyTD.js

@@ -0,0 +1,181 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-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-tooltip {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-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-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-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-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-tooltip, ul.sc-xplor-tooltip {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-tooltip li.sc-xplor-tooltip, ul.sc-xplor-tooltip li.sc-xplor-tooltip {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-tooltip, ul.mdc-list.sc-xplor-tooltip {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-tooltip li.mdc-list-item.sc-xplor-tooltip, ul.mdc-list.sc-xplor-tooltip li.mdc-list-item.sc-xplor-tooltip {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-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-tooltip {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-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-tooltip {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-tooltip .mdc-text-field--outlined.sc-xplor-tooltip .mdc-notched-outline__notch.sc-xplor-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-tooltip .mdc-notched-outline__notch.sc-xplor-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-tooltip .mdc-notched-outline.sc-xplor-tooltip .mdc-notched-outline__notch.sc-xplor-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-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-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-tooltip {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-tooltip-h {\n  display: inline-block;\n  position: relative;\n}\n\n.tooltip-trigger.sc-xplor-tooltip {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.tooltip.sc-xplor-tooltip {\n  position: fixed;\n  z-index: 9999;\n  background-color: #424242;\n  color: #fff;\n  border-radius: 4px;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  max-width: 300px;\n  word-wrap: break-word;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  pointer-events: none;\n  opacity: 0;\n  animation: tooltipFadeIn 0.2s ease forwards;\n}\n\n@keyframes tooltipFadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.tooltip__content.sc-xplor-tooltip {\n  position: relative;\n  z-index: 1;\n}\n\n.tooltip__arrow.sc-xplor-tooltip {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background-color: #424242;\n  z-index: 0;\n}\n\n.tooltip--top.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  margin-top: -6px;\n  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--bottom.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--left.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  margin-left: -6px;\n  display: block;\n  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--right.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);\n}";
+
+const XplorTooltip = /*@__PURE__*/ proxyCustomElement(class XplorTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.position = 'top';
+        this.trigger = 'hover';
+        this.arrow = true;
+        this.open = false;
+        this.disabled = false;
+        this.tooltipStyle = {};
+        this.arrowStyle = {};
+        this.handleMouseEnter = () => {
+            if (this.disabled)
+                return;
+            if (this.hideTimeout) {
+                clearTimeout(this.hideTimeout);
+            }
+            this.showTooltip();
+        };
+        this.handleMouseLeave = () => {
+            if (this.disabled)
+                return;
+            this.hideTimeout = setTimeout(() => {
+                this.hideTooltip();
+            }, 100);
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.trigger === 'click') {
+                this.open = !this.open;
+                if (this.open) {
+                    requestAnimationFrame(() => this.updatePosition());
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        if (this.trigger === 'hover') {
+            this.setupHoverListeners();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupListeners();
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+        }
+    }
+    setupHoverListeners() {
+        if (this.triggerEl) {
+            this.triggerEl.addEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerEl.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+    }
+    cleanupListeners() {
+        if (this.triggerEl) {
+            this.triggerEl.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerEl.removeEventListener('mouseleave', this.handleMouseLeave);
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.trigger === 'click' && this.open) {
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.open = false;
+            }
+        }
+    }
+    showTooltip() {
+        this.open = true;
+        requestAnimationFrame(() => this.updatePosition());
+    }
+    hideTooltip() {
+        this.open = false;
+    }
+    updatePosition() {
+        if (!this.triggerEl || !this.tooltipEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const gap = 8; // Space between trigger and tooltip
+        const arrowSize = this.arrow ? 6 : 0;
+        let top = 0;
+        let left = 0;
+        let arrowTop = '';
+        let arrowLeft = '';
+        let arrowTransform = '';
+        switch (this.position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                arrowTop = '100%';
+                arrowLeft = '50%';
+                arrowTransform = 'translateX(-50%) rotate(45deg)';
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                arrowTop = '-6px';
+                arrowLeft = '50%';
+                arrowTransform = 'translateX(-50%) rotate(45deg)';
+                break;
+            case 'left':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.left - tooltipRect.width - gap - arrowSize;
+                arrowTop = '50%';
+                arrowLeft = '100%';
+                arrowTransform = 'translateY(-50%) rotate(45deg)';
+                break;
+            case 'right':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.right + gap + arrowSize;
+                arrowTop = '50%';
+                arrowLeft = '-6px';
+                arrowTransform = 'translateY(-50%) rotate(45deg)';
+                break;
+        }
+        // Keep tooltip within viewport
+        const viewportPadding = 8;
+        if (left < viewportPadding) {
+            left = viewportPadding;
+        }
+        else if (left + tooltipRect.width > window.innerWidth - viewportPadding) {
+            left = window.innerWidth - tooltipRect.width - viewportPadding;
+        }
+        if (top < viewportPadding) {
+            top = viewportPadding;
+        }
+        else if (top + tooltipRect.height > window.innerHeight - viewportPadding) {
+            top = window.innerHeight - tooltipRect.height - viewportPadding;
+        }
+        this.tooltipStyle = {
+            top: `${top}px`,
+            left: `${left}px`,
+        };
+        this.arrowStyle = {
+            top: arrowTop,
+            left: arrowLeft,
+            transform: arrowTransform,
+        };
+    }
+    render() {
+        return (h(Host, { key: '472521bc51295f0b7dcc4d17c0aef70df5c7181e' }, h("div", { key: '9458cc629deea68c914e7214a762498ff9c3d4c8', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick }, h("slot", { key: 'f5f6d6c85270fdca9b345dc9fed31b776c5d6358', name: "trigger" })), this.open && (h("div", { key: 'd56f6b7f8e2d4c0b6425a85a290e330978645e74', class: {
+                'tooltip': true,
+                [`tooltip--${this.position}`]: true,
+            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip" }, h("div", { key: '0b5735ca4b5d591dbec6f6ca6b2e47233b391198', class: "tooltip__content" }, h("slot", { key: 'c4e8c76025b546b8aa485f3f9d37ee7ecf7fbddd' }, this.content)), this.arrow && (h("div", { key: '373c339feda5732f8c5f2307deea89f2d66969ba', class: "tooltip__arrow", style: this.arrowStyle }))))));
+    }
+    get el() { return this; }
+    static get style() { return xplorTooltipCss; }
+}, [6, "xplor-tooltip", {
+        "position": [1],
+        "trigger": [1],
+        "arrow": [4],
+        "open": [1028],
+        "content": [1],
+        "disabled": [4],
+        "tooltipStyle": [32],
+        "arrowStyle": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorTooltip);
+            }
+            break;
+    } });
+}
+
+export { XplorTooltip as X, defineCustomElement as d };
+//# sourceMappingURL=p-CTD6SyTD.js.map
+
+//# sourceMappingURL=p-CTD6SyTD.js.map

package/components/p-CTD6SyTD.js.map

@@ -0,0 +1 @@
+{"file":"p-CTD6SyTD.js","mappings":";;AAAA,MAAM,eAAe,GAAG,83PAA83P;;MCUz4P,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;AAQY,QAAA,IAAQ,CAAA,QAAA,GAAoB,KAAK;AACjC,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;AACjC,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;AACJ,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAEtC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAExB,QAAA,IAAY,CAAA,YAAA,GAAQ,EAAE;AACtB,QAAA,IAAU,CAAA,UAAA,GAAQ,EAAE;AAiCrB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC5B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,gBAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;;YAElC,IAAI,CAAC,WAAW,EAAE;AACtB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC5B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAK;gBAC/B,IAAI,CAAC,WAAW,EAAE;aACrB,EAAE,GAAG,CAAC;AACX,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC1B,gBAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,gBAAA,IAAI,IAAI,CAAC,IAAI,EAAE;oBACX,qBAAqB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;;;AAG9D,SAAC;AAkIJ;IApLG,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;YAC1B,IAAI,CAAC,mBAAmB,EAAE;;;IAIlC,oBAAoB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;AACvB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;;;IAI9B,mBAAmB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;YACpE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;;IAIpE,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;YACvE,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;;AA8B/E,IAAA,mBAAmB,CAAC,KAAiB,EAAA;QACjC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAc;YACnC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC3B,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;;IAKrB,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,qBAAqB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;;IAG9C,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;IAGb,cAAc,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QAExC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;AAC1D,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;QAEpC,IAAI,GAAG,GAAG,CAAC;QACX,IAAI,IAAI,GAAG,CAAC;QACZ,IAAI,QAAQ,GAAG,EAAE;QACjB,IAAI,SAAS,GAAG,EAAE;QAClB,IAAI,cAAc,GAAG,EAAE;AAEvB,QAAA,QAAQ,IAAI,CAAC,QAAQ;AACjB,YAAA,KAAK,KAAK;AACN,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG,SAAS;AAC5D,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;gBACvE,QAAQ,GAAG,MAAM;gBACjB,SAAS,GAAG,KAAK;gBACjB,cAAc,GAAG,gCAAgC;gBACjD;AAEJ,YAAA,KAAK,QAAQ;gBACT,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG,SAAS;AAC1C,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC;gBACvE,QAAQ,GAAG,MAAM;gBACjB,SAAS,GAAG,KAAK;gBACjB,cAAc,GAAG,gCAAgC;gBACjD;AAEJ,YAAA,KAAK,MAAM;AACP,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;AACvE,gBAAA,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,GAAG,GAAG,SAAS;gBAC7D,QAAQ,GAAG,KAAK;gBAChB,SAAS,GAAG,MAAM;gBAClB,cAAc,GAAG,gCAAgC;gBACjD;AAEJ,YAAA,KAAK,OAAO;AACR,gBAAA,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;gBACvE,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,GAAG,GAAG,SAAS;gBAC1C,QAAQ,GAAG,KAAK;gBAChB,SAAS,GAAG,MAAM;gBAClB,cAAc,GAAG,gCAAgC;gBACjD;;;QAIR,MAAM,eAAe,GAAG,CAAC;AACzB,QAAA,IAAI,IAAI,GAAG,eAAe,EAAE;YACxB,IAAI,GAAG,eAAe;;AACnB,aAAA,IAAI,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,eAAe,EAAE;YACvE,IAAI,GAAG,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,KAAK,GAAG,eAAe;;AAGlE,QAAA,IAAI,GAAG,GAAG,eAAe,EAAE;YACvB,GAAG,GAAG,eAAe;;AAClB,aAAA,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,eAAe,EAAE;YACxE,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC,MAAM,GAAG,eAAe;;QAGnE,IAAI,CAAC,YAAY,GAAG;YAChB,GAAG,EAAE,CAAG,EAAA,GAAG,CAAI,EAAA,CAAA;YACf,IAAI,EAAE,CAAG,EAAA,IAAI,CAAI,EAAA,CAAA;SACpB;QAED,IAAI,CAAC,UAAU,GAAG;AACd,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,SAAS,EAAE,cAAc;SAC5B;;IAGL,MAAM,GAAA;AACF,QAAA,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACrB,EAEL,IAAI,CAAC,IAAI,KACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AACtC,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,SAAS,EAAA,EAEd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,OAAO,CAAQ,CACzB,EACL,IAAI,CAAC,KAAK,KACP,4DACI,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,IAAI,CAAC,UAAU,EACxB,CAAA,CACL,CACC,CACT,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-tooltip/xplor-tooltip.scss?tag=xplor-tooltip&encapsulation=scoped","src/components/xplor-tooltip/xplor-tooltip.tsx"],"sourcesContent":[":host {\n    display: inline-block;\n    position: relative;\n}\n\n.tooltip-trigger {\n    display: inline-flex;\n    cursor: pointer;\n}\n\n.tooltip {\n    position: fixed;\n    z-index: 9999;\n    background-color: #424242;\n    color: #fff;\n    border-radius: 4px;\n    padding: 0.5rem 0.75rem;\n    font-size: 0.875rem;\n    line-height: 1.4;\n    max-width: 300px;\n    word-wrap: break-word;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    pointer-events: none;\n    opacity: 0;\n    animation: tooltipFadeIn 0.2s ease forwards;\n}\n\n@keyframes tooltipFadeIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9);\n    }\n\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n.tooltip__content {\n    position: relative;\n    z-index: 1;\n}\n\n.tooltip__arrow {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    background-color: #424242;\n    z-index: 0;\n}\n\n.tooltip--top .tooltip__arrow {\n    margin-top: -6px;\n    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--bottom .tooltip__arrow {\n    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--left .tooltip__arrow {\n    margin-left: -6px;\n    display: block;\n    box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--right .tooltip__arrow {\n    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);\n}","import { Component, Host, h, Prop, State, Element, Listen } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'manual';\n\n@Component({\n    tag: 'xplor-tooltip',\n    styleUrl: 'xplor-tooltip.scss',\n    scoped: true,\n})\nexport class XplorTooltip {\n    @Element() el: HTMLElement;\n\n    @Prop() position: TooltipPosition = 'top';\n    @Prop() trigger: TooltipTrigger = 'hover';\n    @Prop() arrow: boolean = true;\n    @Prop({ mutable: true }) open: boolean = false;\n    @Prop() content: string;\n    @Prop() disabled: boolean = false;\n\n    @State() tooltipStyle: any = {};\n    @State() arrowStyle: any = {};\n\n    private triggerEl: HTMLDivElement;\n    private tooltipEl: HTMLDivElement;\n    private hideTimeout: any;\n\n    componentDidLoad() {\n        if (this.trigger === 'hover') {\n            this.setupHoverListeners();\n        }\n    }\n\n    disconnectedCallback() {\n        this.cleanupListeners();\n        if (this.hideTimeout) {\n            clearTimeout(this.hideTimeout);\n        }\n    }\n\n    private setupHoverListeners() {\n        if (this.triggerEl) {\n            this.triggerEl.addEventListener('mouseenter', this.handleMouseEnter);\n            this.triggerEl.addEventListener('mouseleave', this.handleMouseLeave);\n        }\n    }\n\n    private cleanupListeners() {\n        if (this.triggerEl) {\n            this.triggerEl.removeEventListener('mouseenter', this.handleMouseEnter);\n            this.triggerEl.removeEventListener('mouseleave', this.handleMouseLeave);\n        }\n    }\n\n    private handleMouseEnter = () => {\n        if (this.disabled) return;\n        if (this.hideTimeout) {\n            clearTimeout(this.hideTimeout);\n        }\n        this.showTooltip();\n    };\n\n    private handleMouseLeave = () => {\n        if (this.disabled) return;\n        this.hideTimeout = setTimeout(() => {\n            this.hideTooltip();\n        }, 100);\n    };\n\n    private handleClick = () => {\n        if (this.disabled) return;\n        if (this.trigger === 'click') {\n            this.open = !this.open;\n            if (this.open) {\n                requestAnimationFrame(() => this.updatePosition());\n            }\n        }\n    };\n\n    @Listen('click', { target: 'document' })\n    handleDocumentClick(event: MouseEvent) {\n        if (this.trigger === 'click' && this.open) {\n            const target = event.target as Node;\n            if (!this.el.contains(target)) {\n                this.open = false;\n            }\n        }\n    }\n\n    private showTooltip() {\n        this.open = true;\n        requestAnimationFrame(() => this.updatePosition());\n    }\n\n    private hideTooltip() {\n        this.open = false;\n    }\n\n    private updatePosition() {\n        if (!this.triggerEl || !this.tooltipEl) return;\n\n        const triggerRect = this.triggerEl.getBoundingClientRect();\n        const tooltipRect = this.tooltipEl.getBoundingClientRect();\n        const gap = 8; // Space between trigger and tooltip\n        const arrowSize = this.arrow ? 6 : 0;\n\n        let top = 0;\n        let left = 0;\n        let arrowTop = '';\n        let arrowLeft = '';\n        let arrowTransform = '';\n\n        switch (this.position) {\n            case 'top':\n                top = triggerRect.top - tooltipRect.height - gap - arrowSize;\n                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n                arrowTop = '100%';\n                arrowLeft = '50%';\n                arrowTransform = 'translateX(-50%) rotate(45deg)';\n                break;\n\n            case 'bottom':\n                top = triggerRect.bottom + gap + arrowSize;\n                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n                arrowTop = '-6px';\n                arrowLeft = '50%';\n                arrowTransform = 'translateX(-50%) rotate(45deg)';\n                break;\n\n            case 'left':\n                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n                left = triggerRect.left - tooltipRect.width - gap - arrowSize;\n                arrowTop = '50%';\n                arrowLeft = '100%';\n                arrowTransform = 'translateY(-50%) rotate(45deg)';\n                break;\n\n            case 'right':\n                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n                left = triggerRect.right + gap + arrowSize;\n                arrowTop = '50%';\n                arrowLeft = '-6px';\n                arrowTransform = 'translateY(-50%) rotate(45deg)';\n                break;\n        }\n\n        // Keep tooltip within viewport\n        const viewportPadding = 8;\n        if (left < viewportPadding) {\n            left = viewportPadding;\n        } else if (left + tooltipRect.width > window.innerWidth - viewportPadding) {\n            left = window.innerWidth - tooltipRect.width - viewportPadding;\n        }\n\n        if (top < viewportPadding) {\n            top = viewportPadding;\n        } else if (top + tooltipRect.height > window.innerHeight - viewportPadding) {\n            top = window.innerHeight - tooltipRect.height - viewportPadding;\n        }\n\n        this.tooltipStyle = {\n            top: `${top}px`,\n            left: `${left}px`,\n        };\n\n        this.arrowStyle = {\n            top: arrowTop,\n            left: arrowLeft,\n            transform: arrowTransform,\n        };\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"tooltip-trigger\"\n                    ref={(el) => (this.triggerEl = el)}\n                    onClick={this.handleClick}\n                >\n                    <slot name=\"trigger\" />\n                </div>\n\n                {this.open && (\n                    <div\n                        class={{\n                            'tooltip': true,\n                            [`tooltip--${this.position}`]: true,\n                        }}\n                        style={this.tooltipStyle}\n                        ref={(el) => (this.tooltipEl = el)}\n                        role=\"tooltip\"\n                    >\n                        <div class=\"tooltip__content\">\n                            <slot>{this.content}</slot>\n                        </div>\n                        {this.arrow && (\n                            <div\n                                class=\"tooltip__arrow\"\n                                style={this.arrowStyle}\n                            />\n                        )}\n                    </div>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}