@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-badge-waitlist.js

@@ -0,0 +1,36 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorBadgeWaitlistCss = "@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-badge-waitlist {\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-badge-waitlist {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-badge-waitlist {\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-badge-waitlist {\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-badge-waitlist {\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-badge-waitlist {\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-badge-waitlist, ul.sc-xplor-badge-waitlist {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-badge-waitlist li.sc-xplor-badge-waitlist, ul.sc-xplor-badge-waitlist li.sc-xplor-badge-waitlist {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-badge-waitlist, ul.mdc-list.sc-xplor-badge-waitlist {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-badge-waitlist li.mdc-list-item.sc-xplor-badge-waitlist, ul.mdc-list.sc-xplor-badge-waitlist li.mdc-list-item.sc-xplor-badge-waitlist {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-badge-waitlist {\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-badge-waitlist {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-badge-waitlist {\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-badge-waitlist {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-badge-waitlist .mdc-text-field--outlined.sc-xplor-badge-waitlist .mdc-notched-outline__notch.sc-xplor-badge-waitlist {\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-badge-waitlist .mdc-notched-outline__notch.sc-xplor-badge-waitlist {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-badge-waitlist .mdc-notched-outline.sc-xplor-badge-waitlist .mdc-notched-outline__notch.sc-xplor-badge-waitlist {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-badge-waitlist {\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-badge-waitlist:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-badge-waitlist {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-badge-waitlist-h {\n  display: inline-block;\n}\n\n.xplor-badge-waitlist.sc-xplor-badge-waitlist {\n  background-color: #FFF3E6;\n  color: #B35A00;\n  font-weight: 400;\n  padding: 4px 12px;\n  border-radius: 16px;\n  display: inline-block;\n}";
+
+const XplorBadgeWaitlist$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeWaitlist extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '918d4113efa7e206ba15af2ccacdf11950640aaf' }, h("span", { key: '697713efbf0a9b86a6af4e7bf102f07a7ad2dd48', class: "xplor-badge-waitlist" }, "Waitlist")));
+    }
+    static get style() { return xplorBadgeWaitlistCss; }
+}, [2, "xplor-badge-waitlist"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-badge-waitlist"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-badge-waitlist":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBadgeWaitlist$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBadgeWaitlist = XplorBadgeWaitlist$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBadgeWaitlist, defineCustomElement };
+//# sourceMappingURL=xplor-badge-waitlist.js.map
+
+//# sourceMappingURL=xplor-badge-waitlist.js.map

package/dist/components/xplor-badge-waitlist.js.map

@@ -0,0 +1 @@
+{"file":"xplor-badge-waitlist.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,i6NAAi6N;;MCOl7NA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;IAC7B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAE3B,EAAA,UAAA,CAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBadgeWaitlist","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-badge-waitlist/xplor-badge-waitlist.scss?tag=xplor-badge-waitlist&encapsulation=scoped","src/components/xplor-badge-waitlist/xplor-badge-waitlist.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-badge-waitlist {\n  background-color: #FFF3E6;\n  color: #B35A00;\n  font-weight: 400;\n  padding: 4px 12px;\n  border-radius: 16px;\n  display: inline-block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-badge-waitlist',\n  styleUrl: 'xplor-badge-waitlist.scss',\n  scoped: true,\n})\nexport class XplorBadgeWaitlist {\n  render() {\n    return (\n      <Host>\n        <span class=\"xplor-badge-waitlist\">\n          Waitlist\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorBadge extends Components.XplorBadge, HTMLElement {}
+export const XplorBadge: {
+    prototype: XplorBadge;
+    new (): XplorBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-badge.js

@@ -0,0 +1,152 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorBadgeCss = "@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-badge {\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-badge {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-badge {\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-badge {\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-badge {\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-badge {\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-badge, ul.sc-xplor-badge {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-badge li.sc-xplor-badge, ul.sc-xplor-badge li.sc-xplor-badge {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-badge, ul.mdc-list.sc-xplor-badge {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-badge li.mdc-list-item.sc-xplor-badge, ul.mdc-list.sc-xplor-badge li.mdc-list-item.sc-xplor-badge {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-badge {\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-badge {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-badge {\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-badge {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-badge .mdc-text-field--outlined.sc-xplor-badge .mdc-notched-outline__notch.sc-xplor-badge {\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-badge .mdc-notched-outline__notch.sc-xplor-badge {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-badge .mdc-notched-outline.sc-xplor-badge .mdc-notched-outline__notch.sc-xplor-badge {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-badge {\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-badge:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-badge {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-badge {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-badge {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-badge {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-badge {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-badge {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-badge {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-badge {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-badge {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-badge {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-badge {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-badge {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-badge {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-badge {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-badge {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-badge {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-badge {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-badge {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-badge {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-badge {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-badge {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-badge {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-badge {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-badge {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-badge {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-badge {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-badge {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-badge {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-badge {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-badge {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-badge {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-badge {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-badge {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-badge {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-badge {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-badge {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-badge {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-badge {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-badge {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-badge {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-badge {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-badge {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-badge {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-badge {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-badge {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-badge {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-badge {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-badge {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-badge {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-badge {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-badge {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-badge {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-badge {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-badge {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-badge {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-badge {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-badge {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-badge {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-badge {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-badge {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-badge {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-badge {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-badge {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-badge {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-badge {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-badge {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-badge {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-badge {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-badge {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-badge {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-badge {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-badge {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-badge {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-badge {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-badge {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-badge {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-badge {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-badge {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-badge {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-badge {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-badge {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-badge {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-badge {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-badge {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-badge {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-badge {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-badge {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-badge {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-badge {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-badge {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-badge {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-badge {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-badge {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-badge {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-badge {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-badge {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-badge {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-badge {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-badge {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-badge {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-badge {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-badge {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-badge {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-badge {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-badge {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-badge {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-badge {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-badge {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-badge {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-badge {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-badge {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-badge {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-badge {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-badge {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-badge {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-badge {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-badge {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-badge {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-badge {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-badge {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-badge {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-badge {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-badge {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-badge {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-badge {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-badge {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-badge {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-badge {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-badge {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-badge {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-badge {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-badge {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-badge {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-badge {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-badge {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-badge {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-badge {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-badge {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-badge {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-badge {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-badge {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-badge {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-badge {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-badge {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-badge {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-badge {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-badge {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-badge {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-badge {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-badge {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-badge {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-badge {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-badge {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-badge {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-badge {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-badge {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-badge {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-badge {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-badge {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-badge {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-badge {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-badge {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-badge {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-badge {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-badge {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-badge {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-badge {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-badge {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-badge {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-badge {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-badge {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-badge {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-badge {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-badge {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-badge {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-badge {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-badge {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-badge {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-badge {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-badge {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-badge {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-badge {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-badge {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-badge-h {\n  display: inline-block;\n}\n\n.xplor-badge.sc-xplor-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  padding: 4px 12px;\n  border-radius: 16px;\n  background-color: var(--xplor-badge-bg, var(--color-primary-50, #e3f2fd));\n  color: var(--xplor-badge-color, var(--color-primary));\n  transition: all 0.2s ease;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.xplor-badge--small.sc-xplor-badge {\n  font-size: 0.75rem;\n  padding: 2px 8px;\n  border-radius: 12px;\n}\n.xplor-badge--medium.sc-xplor-badge {\n  font-size: 0.875rem;\n  padding: 4px 12px;\n  border-radius: 16px;\n}\n.xplor-badge--large.sc-xplor-badge {\n  font-size: 1rem;\n  padding: 6px 16px;\n  border-radius: 20px;\n}\n.xplor-badge--flat.sc-xplor-badge {\n  border: none;\n}\n.xplor-badge--outlined.sc-xplor-badge {\n  background-color: transparent;\n  border: 1px solid var(--xplor-badge-bg, var(--color-primary));\n  color: var(--xplor-badge-bg, var(--color-primary));\n}\n.xplor-badge--tonal.sc-xplor-badge {\n  background-color: var(--xplor-badge-bg, var(--color-primary-50, #e3f2fd));\n  color: var(--xplor-badge-color, var(--color-primary));\n}\n.xplor-badge--datatable.sc-xplor-badge {\n  padding: 8px 12px;\n  border-radius: 14px;\n}";
+
+const XplorBadge$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadge extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Background color (can be CSS color or theme color name)
+         */
+        this.backgroundColor = '#e3f2fd';
+        /**
+         * Text color - 'auto' will calculate contrasting color
+         */
+        this.color = 'auto';
+        /**
+         * Luminance threshold for auto contrast calculation (0-255)
+         */
+        this.threshold = 130;
+        /**
+         * Visual variant
+         */
+        this.variant = 'flat';
+        /**
+         * Size variant
+         */
+        this.size = 'medium';
+        /**
+         * Whether to use datatable styling (slightly larger padding)
+         */
+        this.datatable = false;
+        /**
+         * Optional text content (can also use slot)
+         */
+        this.text = '';
+    }
+    /**
+     * Calculates relative luminance of a color
+     * Based on WCAG 2.0 formula
+     */
+    calculateLuminance(r, g, b) {
+        const [rs, gs, bs] = [r, g, b].map(c => {
+            c = c / 255;
+            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    }
+    /**
+     * Parses hex/rgb/rgba color to RGB values
+     */
+    parseColor(color) {
+        // Handle hex colors
+        if (color.startsWith('#')) {
+            const hex = color.replace('#', '');
+            if (hex.length === 3) {
+                const r = parseInt(hex[0] + hex[0], 16);
+                const g = parseInt(hex[1] + hex[1], 16);
+                const b = parseInt(hex[2] + hex[2], 16);
+                return { r, g, b };
+            }
+            else if (hex.length === 6) {
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                return { r, g, b };
+            }
+        }
+        // Handle rgb/rgba
+        const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch) {
+            return {
+                r: parseInt(rgbMatch[1]),
+                g: parseInt(rgbMatch[2]),
+                b: parseInt(rgbMatch[3]),
+            };
+        }
+        return null;
+    }
+    /**
+     * Calculates contrasting color (black or white) based on background
+     */
+    calculateContrastingColor(bgColor) {
+        const rgb = this.parseColor(bgColor);
+        if (!rgb)
+            return '#000000';
+        const luminance = this.calculateLuminance(rgb.r, rgb.g, rgb.b);
+        // Using threshold to determine light vs dark background
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
+    /**
+     * Gets the computed CSS variables for the badge
+     */
+    get cssVars() {
+        const vars = {};
+        // Set background color
+        vars['--xplor-badge-bg'] = this.backgroundColor;
+        // Set text color (auto-calculate if needed)
+        if (this.color === 'auto') {
+            vars['--xplor-badge-color'] = this.calculateContrastingColor(this.backgroundColor);
+        }
+        else {
+            vars['--xplor-badge-color'] = this.color;
+        }
+        return vars;
+    }
+    /**
+     * Gets the computed CSS classes
+     */
+    get computedClasses() {
+        return {
+            'xplor-badge': true,
+            [`xplor-badge--${this.variant}`]: true,
+            [`xplor-badge--${this.size}`]: true,
+            'xplor-badge--datatable': this.datatable,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4f0691b5233e85340519a7ead5f3f3508c35c307' }, h("span", { key: '1588d8d3a85def71d7e5b5f5883d36ca5a232141', class: this.computedClasses, style: this.cssVars }, h("slot", { key: '571aa32299b77b94351ef8a1b66e071fa318c2e5' }, this.text))));
+    }
+    static get style() { return xplorBadgeCss; }
+}, [6, "xplor-badge", {
+        "backgroundColor": [1, "background-color"],
+        "color": [1],
+        "threshold": [2],
+        "variant": [1],
+        "size": [1],
+        "datatable": [4],
+        "text": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBadge$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBadge = XplorBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBadge, defineCustomElement };
+//# sourceMappingURL=xplor-badge.js.map
+
+//# sourceMappingURL=xplor-badge.js.map

package/dist/components/xplor-badge.js.map

@@ -0,0 +1 @@
+{"file":"xplor-badge.js","mappings":";;AAAA,MAAM,aAAa,GAAG,iknBAAiknB;;MCO1knBA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;AAME;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,SAAS;AAE3C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,MAAM;AAE9B;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,GAAG;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkC,MAAM;AAEvD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAmG1B;AAjGC;;;AAGG;AACK,IAAA,kBAAkB,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAA;QACxD,MAAM,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAG;AACrC,YAAA,CAAC,GAAG,CAAC,GAAG,GAAG;YACX,OAAO,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC;AACtE,SAAC,CAAC;QACF,OAAO,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,EAAE;;AAGhD;;AAEG;AACK,IAAA,UAAU,CAAC,KAAa,EAAA;;AAE9B,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACzB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;AAClC,YAAA,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AACvC,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AACvC,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AACvC,gBAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;;AACb,iBAAA,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3B,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3C,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3C,gBAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3C,gBAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;;;;QAKtB,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,gCAAgC,CAAC;QAC9D,IAAI,QAAQ,EAAE;YACZ,OAAO;AACL,gBAAA,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxB,gBAAA,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxB,gBAAA,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACzB;;AAGH,QAAA,OAAO,IAAI;;AAGb;;AAEG;AACK,IAAA,yBAAyB,CAAC,OAAe,EAAA;QAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;AACpC,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,SAAS;AAE1B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;;QAE9D,OAAO,SAAS,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS;;AAGhD;;AAEG;AACH,IAAA,IAAY,OAAO,GAAA;QACjB,MAAM,IAAI,GAA8B,EAAE;;AAG1C,QAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,eAAe;;AAG/C,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,eAAe,CAAC;;aAC7E;AACL,YAAA,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,KAAK;;AAG1C,QAAA,OAAO,IAAI;;AAGb;;AAEG;AACH,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACtC,YAAA,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YACnC,wBAAwB,EAAE,IAAI,CAAC,SAAS;SACzC;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACnB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBadge","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-badge/xplor-badge.scss?tag=xplor-badge&encapsulation=scoped","src/components/xplor-badge/xplor-badge.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n@use '../../styles/mixins.scss' as mixins;\n\n:host {\n  display: inline-block;\n}\n\n.xplor-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  padding: 4px 12px;\n  border-radius: 16px;\n  background-color: var(--xplor-badge-bg, colours.$primary-50);\n  color: var(--xplor-badge-color, colours.$primary);\n  transition: all 0.2s ease;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  // Size variants\n  &--small {\n    font-size: 0.75rem;\n    padding: 2px 8px;\n    border-radius: 12px;\n  }\n\n  &--medium {\n    font-size: 0.875rem;\n    padding: 4px 12px;\n    border-radius: 16px;\n  }\n\n  &--large {\n    font-size: 1rem;\n    padding: 6px 16px;\n    border-radius: 20px;\n  }\n\n  // Style variants\n  &--flat {\n    border: none;\n  }\n\n  &--outlined {\n    background-color: transparent;\n    border: 1px solid var(--xplor-badge-bg, colours.$primary);\n    color: var(--xplor-badge-bg, colours.$primary);\n  }\n\n  &--tonal {\n    background-color: var(--xplor-badge-bg, colours.$primary-50);\n    color: var(--xplor-badge-color, colours.$primary);\n  }\n\n  // Datatable variant (slightly larger padding)\n  &--datatable {\n    padding: 8px 12px;\n    border-radius: 14px;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-badge',\n  styleUrl: 'xplor-badge.scss',\n  scoped: true,\n})\nexport class XplorBadge {\n  /**\n   * Background color (can be CSS color or theme color name)\n   */\n  @Prop() backgroundColor: string = '#e3f2fd';\n\n  /**\n   * Text color - 'auto' will calculate contrasting color\n   */\n  @Prop() color: string = 'auto';\n\n  /**\n   * Luminance threshold for auto contrast calculation (0-255)\n   */\n  @Prop() threshold: number = 130;\n\n  /**\n   * Visual variant\n   */\n  @Prop() variant: 'flat' | 'outlined' | 'tonal' = 'flat';\n\n  /**\n   * Size variant\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to use datatable styling (slightly larger padding)\n   */\n  @Prop() datatable: boolean = false;\n\n  /**\n   * Optional text content (can also use slot)\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Calculates relative luminance of a color\n   * Based on WCAG 2.0 formula\n   */\n  private calculateLuminance(r: number, g: number, b: number): number {\n    const [rs, gs, bs] = [r, g, b].map(c => {\n      c = c / 255;\n      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    });\n    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n  }\n\n  /**\n   * Parses hex/rgb/rgba color to RGB values\n   */\n  private parseColor(color: string): { r: number; g: number; b: number } | null {\n    // Handle hex colors\n    if (color.startsWith('#')) {\n      const hex = color.replace('#', '');\n      if (hex.length === 3) {\n        const r = parseInt(hex[0] + hex[0], 16);\n        const g = parseInt(hex[1] + hex[1], 16);\n        const b = parseInt(hex[2] + hex[2], 16);\n        return { r, g, b };\n      } else if (hex.length === 6) {\n        const r = parseInt(hex.substring(0, 2), 16);\n        const g = parseInt(hex.substring(2, 4), 16);\n        const b = parseInt(hex.substring(4, 6), 16);\n        return { r, g, b };\n      }\n    }\n\n    // Handle rgb/rgba\n    const rgbMatch = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (rgbMatch) {\n      return {\n        r: parseInt(rgbMatch[1]),\n        g: parseInt(rgbMatch[2]),\n        b: parseInt(rgbMatch[3]),\n      };\n    }\n\n    return null;\n  }\n\n  /**\n   * Calculates contrasting color (black or white) based on background\n   */\n  private calculateContrastingColor(bgColor: string): string {\n    const rgb = this.parseColor(bgColor);\n    if (!rgb) return '#000000';\n\n    const luminance = this.calculateLuminance(rgb.r, rgb.g, rgb.b);\n    // Using threshold to determine light vs dark background\n    return luminance > 0.5 ? '#000000' : '#ffffff';\n  }\n\n  /**\n   * Gets the computed CSS variables for the badge\n   */\n  private get cssVars(): { [key: string]: string } {\n    const vars: { [key: string]: string } = {};\n\n    // Set background color\n    vars['--xplor-badge-bg'] = this.backgroundColor;\n\n    // Set text color (auto-calculate if needed)\n    if (this.color === 'auto') {\n      vars['--xplor-badge-color'] = this.calculateContrastingColor(this.backgroundColor);\n    } else {\n      vars['--xplor-badge-color'] = this.color;\n    }\n\n    return vars;\n  }\n\n  /**\n   * Gets the computed CSS classes\n   */\n  private get computedClasses(): { [key: string]: boolean } {\n    return {\n      'xplor-badge': true,\n      [`xplor-badge--${this.variant}`]: true,\n      [`xplor-badge--${this.size}`]: true,\n      'xplor-badge--datatable': this.datatable,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.computedClasses} style={this.cssVars}>\n          <slot>{this.text}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-btn-back-to-parent.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorBtnBackToParent extends Components.XplorBtnBackToParent, HTMLElement {}
+export const XplorBtnBackToParent: {
+    prototype: XplorBtnBackToParent;
+    new (): XplorBtnBackToParent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-btn-back-to-parent.js

@@ -0,0 +1,73 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnBackToParentCss = "@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-btn-back-to-parent {\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-back-to-parent {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-back-to-parent {\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-back-to-parent {\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-back-to-parent {\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-back-to-parent {\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-back-to-parent, ul.sc-xplor-btn-back-to-parent {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-back-to-parent li.sc-xplor-btn-back-to-parent, ul.sc-xplor-btn-back-to-parent li.sc-xplor-btn-back-to-parent {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-back-to-parent, ul.mdc-list.sc-xplor-btn-back-to-parent {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-back-to-parent li.mdc-list-item.sc-xplor-btn-back-to-parent, ul.mdc-list.sc-xplor-btn-back-to-parent li.mdc-list-item.sc-xplor-btn-back-to-parent {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-back-to-parent {\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-back-to-parent {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-back-to-parent {\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-back-to-parent {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-back-to-parent .mdc-text-field--outlined.sc-xplor-btn-back-to-parent .mdc-notched-outline__notch.sc-xplor-btn-back-to-parent {\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-back-to-parent .mdc-notched-outline__notch.sc-xplor-btn-back-to-parent {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-back-to-parent .mdc-notched-outline.sc-xplor-btn-back-to-parent .mdc-notched-outline__notch.sc-xplor-btn-back-to-parent {\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-back-to-parent {\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-back-to-parent: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-back-to-parent {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-back-to-parent-h {\n  display: inline-block;\n}\n\n.xplor-btn-back-to-parent.sc-xplor-btn-back-to-parent {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  font-size: 1rem;\n  z-index: 1;\n  padding: 0;\n  width: var(--btn-size, 2.25rem);\n  height: var(--btn-size, 2.25rem);\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: #008480;\n  transition: background-color 0.2s ease;\n}\n.xplor-btn-back-to-parent__icon.sc-xplor-btn-back-to-parent {\n  font-size: 1rem;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-btn-back-to-parent.sc-xplor-btn-back-to-parent:hover {\n  background-color: #E6F7F7;\n}\n.xplor-btn-back-to-parent--inline.sc-xplor-btn-back-to-parent {\n  position: relative;\n  top: 0;\n  right: 0;\n}";
+
+const XplorBtnBackToParent$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBackToParent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.back = createEvent(this, "back");
+        /**
+         * Button size
+         */
+        this.size = '2.25rem';
+        /**
+         * Whether to use inline (relative) positioning instead of absolute
+         */
+        this.inline = false;
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Text/icon color
+         */
+        this.color = 'secondary';
+        /**
+         * Visual variant
+         */
+        this.variant = 'tonal';
+        this.handleClick = () => {
+            this.back.emit();
+        };
+    }
+    render() {
+        const buttonClasses = {
+            'xplor-btn-back-to-parent': true,
+            'xplor-btn-back-to-parent--inline': this.inline,
+        };
+        const buttonStyles = {
+            '--btn-size': this.size,
+        };
+        return (h(Host, { key: '9ea4d137e9f4c80d0f5586953c5d463f365f5205' }, h("button", { key: '1e1839f03ca09a8a106a6f2ee2d7ca0a7b407588', class: buttonClasses, style: buttonStyles, onClick: this.handleClick }, h("span", { key: '50f7ee25b402d4ee796670ab59ad3c1085a0138d', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
+    }
+    static get style() { return xplorBtnBackToParentCss; }
+}, [2, "xplor-btn-back-to-parent", {
+        "size": [1],
+        "inline": [4],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-back-to-parent"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-back-to-parent":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnBackToParent$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnBackToParent = XplorBtnBackToParent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnBackToParent, defineCustomElement };
+//# sourceMappingURL=xplor-btn-back-to-parent.js.map
+
+//# sourceMappingURL=xplor-btn-back-to-parent.js.map

package/dist/components/xplor-btn-back-to-parent.js.map

@@ -0,0 +1 @@
+{"file":"xplor-btn-back-to-parent.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,wrPAAwrP;;MCO3sPA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,OAAO;AAO7D,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAClB,SAAC;AAwBF;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,0BAA0B,EAAE,IAAI;YAChC,kCAAkC,EAAE,IAAI,CAAC,MAAM;SAChD;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gCAAgC,aAAS,CAC9C,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnBackToParent","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.scss?tag=xplor-btn-back-to-parent&encapsulation=scoped","src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-back-to-parent {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  font-size: 1rem;\n  z-index: 1;\n  padding: 0;\n  width: var(--btn-size, 2.25rem);\n  height: var(--btn-size, 2.25rem);\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: #008480;\n  transition: background-color 0.2s ease;\n\n  &__icon {\n    font-size: 1rem;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: #E6F7F7;\n  }\n\n  &--inline {\n    position: relative;\n    top: 0;\n    right: 0;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-back-to-parent',\n  styleUrl: 'xplor-btn-back-to-parent.scss',\n  scoped: true,\n})\nexport class XplorBtnBackToParent {\n  /**\n   * Button size\n   */\n  @Prop() size: string = '2.25rem';\n\n  /**\n   * Whether to use inline (relative) positioning instead of absolute\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Text/icon color\n   */\n  @Prop() color: string = 'secondary';\n\n  /**\n   * Visual variant\n   */\n  @Prop() variant: 'text' | 'outlined' | 'elevated' | 'tonal' = 'tonal';\n\n  /**\n   * Back event (emitted on click)\n   */\n  @Event() back: EventEmitter<void>;\n\n  private handleClick = () => {\n    this.back.emit();\n  };\n\n  render() {\n    const buttonClasses = {\n      'xplor-btn-back-to-parent': true,\n      'xplor-btn-back-to-parent--inline': this.inline,\n    };\n\n    const buttonStyles = {\n      '--btn-size': this.size,\n    };\n\n    return (\n      <Host>\n        <button\n          class={buttonClasses}\n          style={buttonStyles}\n          onClick={this.handleClick}\n        >\n          <span class=\"xplor-btn-back-to-parent__icon\">✕</span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-btn-back.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorBtnBack extends Components.XplorBtnBack, HTMLElement {}
+export const XplorBtnBack: {
+    prototype: XplorBtnBack;
+    new (): XplorBtnBack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-btn-back.js

@@ -0,0 +1,77 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnBackCss = "@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-btn-back {\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-back {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-back {\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-back {\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-back {\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-back {\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-back, ul.sc-xplor-btn-back {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-back li.sc-xplor-btn-back, ul.sc-xplor-btn-back li.sc-xplor-btn-back {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-back, ul.mdc-list.sc-xplor-btn-back {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-back li.mdc-list-item.sc-xplor-btn-back, ul.mdc-list.sc-xplor-btn-back li.mdc-list-item.sc-xplor-btn-back {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-back {\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-back {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-back {\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-back {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-back .mdc-text-field--outlined.sc-xplor-btn-back .mdc-notched-outline__notch.sc-xplor-btn-back {\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-back .mdc-notched-outline__notch.sc-xplor-btn-back {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-back .mdc-notched-outline.sc-xplor-btn-back .mdc-notched-outline__notch.sc-xplor-btn-back {\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-back {\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-back: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-back {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-back-h {\n  display: inline-block;\n}\n\n.xplor-btn-back.sc-xplor-btn-back {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gap, 0.625rem);\n  min-width: var(--min-width, 6.375rem);\n  min-height: var(--min-height, 3rem);\n  padding-left: 0;\n  padding-right: 1rem;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: opacity 0.2s ease;\n}\n.xplor-btn-back__icon.sc-xplor-btn-back {\n  font-size: 1.5rem;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-btn-back__text.sc-xplor-btn-back {\n  line-height: 1;\n}\n.xplor-btn-back.sc-xplor-btn-back:hover:not(.xplor-btn-back--disabled) {\n  opacity: 0.8;\n}\n.xplor-btn-back--disabled.sc-xplor-btn-back {\n  opacity: 0.38;\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+
+const XplorBtnBack$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBack extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClick = createEvent(this, "xplorClick");
+        /**
+         * Button color
+         */
+        this.color = 'secondary';
+        /**
+         * Minimum width
+         */
+        this.minWidth = '6.375rem';
+        /**
+         * Minimum height
+         */
+        this.minHeight = '3rem';
+        /**
+         * Gap between icon and text
+         */
+        this.gap = '0.625rem';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        this.handleClick = (event) => {
+            if (!this.disabled) {
+                this.xplorClick.emit(event);
+            }
+        };
+    }
+    render() {
+        const buttonClasses = {
+            'xplor-btn-back': true,
+            'xplor-btn-back--disabled': this.disabled,
+        };
+        const buttonStyles = {
+            '--min-width': this.minWidth,
+            '--min-height': this.minHeight,
+            '--gap': this.gap,
+        };
+        return (h(Host, { key: '1fa9f6b770f01f2a384591293831a2fecb15b593' }, h("button", { key: '3d201c9b3ccb3176401b1c671237825231c78d39', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, h("span", { key: '2e92390e29ad2f0e9c5144f802d66544bd1f00c4', class: "xplor-btn-back__icon" }, "\u2039"), h("span", { key: 'e663a5e163007a0fc82162b6d9a2a8018cab8a76', class: "xplor-btn-back__text" }, h("slot", { key: '4bcd417f211ec014b8c861d309bf709048e34c8d' }, "Back")))));
+    }
+    static get style() { return xplorBtnBackCss; }
+}, [6, "xplor-btn-back", {
+        "color": [1],
+        "minWidth": [1, "min-width"],
+        "minHeight": [1, "min-height"],
+        "gap": [1],
+        "disabled": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-back"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-back":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnBack$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnBack = XplorBtnBack$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnBack, defineCustomElement };
+//# sourceMappingURL=xplor-btn-back.js.map
+
+//# sourceMappingURL=xplor-btn-back.js.map

package/dist/components/xplor-btn-back.js.map

@@ -0,0 +1 @@
+{"file":"xplor-btn-back.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+1OAA+1O;;MCO12OA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,UAAU;AAErC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,MAAM;AAElC;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,UAAU;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE/B,SAAC;AA8BF;IA5BC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC1C;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,aAAa,EAAE,IAAI,CAAC,QAAQ;YAC5B,cAAc,EAAE,IAAI,CAAC,SAAS;YAC9B,OAAO,EAAE,IAAI,CAAC,GAAG;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAS,EAAA,QAAA,CAAA,EAC3C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,MAAA,CAAiB,CACZ,CACA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnBack","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-back/xplor-btn-back.scss?tag=xplor-btn-back&encapsulation=scoped","src/components/xplor-btn-back/xplor-btn-back.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-back {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--gap, 0.625rem);\n  min-width: var(--min-width, 6.375rem);\n  min-height: var(--min-height, 3rem);\n  padding-left: 0;\n  padding-right: 1rem;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: opacity 0.2s ease;\n\n  &__icon {\n    font-size: 1.5rem;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &__text {\n    line-height: 1;\n  }\n\n  &:hover:not(.xplor-btn-back--disabled) {\n    opacity: 0.8;\n  }\n\n  &--disabled {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-back',\n  styleUrl: 'xplor-btn-back.scss',\n  scoped: true,\n})\nexport class XplorBtnBack {\n  /**\n   * Button color\n   */\n  @Prop() color: string = 'secondary';\n\n  /**\n   * Minimum width\n   */\n  @Prop() minWidth: string = '6.375rem';\n\n  /**\n   * Minimum height\n   */\n  @Prop() minHeight: string = '3rem';\n\n  /**\n   * Gap between icon and text\n   */\n  @Prop() gap: string = '0.625rem';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Click event\n   */\n  @Event() xplorClick: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled) {\n      this.xplorClick.emit(event);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'xplor-btn-back': true,\n      'xplor-btn-back--disabled': this.disabled,\n    };\n\n    const buttonStyles = {\n      '--min-width': this.minWidth,\n      '--min-height': this.minHeight,\n      '--gap': this.gap,\n    };\n\n    return (\n      <Host>\n        <button\n          class={buttonClasses}\n          style={buttonStyles}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n        >\n          <span class=\"xplor-btn-back__icon\">‹</span>\n          <span class=\"xplor-btn-back__text\">\n            <slot>Back</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-btn-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorBtnIcon extends Components.XplorBtnIcon, HTMLElement {}
+export const XplorBtnIcon: {
+    prototype: XplorBtnIcon;
+    new (): XplorBtnIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-btn-icon.js

@@ -0,0 +1,78 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnIconCss = "@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-btn-icon {\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-icon {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-icon {\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-icon {\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-icon {\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-icon {\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-icon, ul.sc-xplor-btn-icon {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-icon li.sc-xplor-btn-icon, ul.sc-xplor-btn-icon li.sc-xplor-btn-icon {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-icon, ul.mdc-list.sc-xplor-btn-icon {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-icon li.mdc-list-item.sc-xplor-btn-icon, ul.mdc-list.sc-xplor-btn-icon li.mdc-list-item.sc-xplor-btn-icon {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-icon {\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-icon {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-icon {\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-icon {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-icon .mdc-text-field--outlined.sc-xplor-btn-icon .mdc-notched-outline__notch.sc-xplor-btn-icon {\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-icon .mdc-notched-outline__notch.sc-xplor-btn-icon {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-icon .mdc-notched-outline.sc-xplor-btn-icon .mdc-notched-outline__notch.sc-xplor-btn-icon {\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-icon {\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-icon: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-icon {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-icon-h {\n  display: inline-block;\n}\n\n.xplor-btn-icon.sc-xplor-btn-icon {\n  min-width: 0;\n  min-height: 0;\n  width: var(--btn-size, 32px);\n  height: var(--btn-size, 32px);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  position: relative;\n}\n.xplor-btn-icon__content.sc-xplor-btn-icon {\n  font-size: var(--icon-size, 18px);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.xplor-btn-icon--elevated.sc-xplor-btn-icon {\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.xplor-btn-icon--text.sc-xplor-btn-icon {\n  box-shadow: none;\n}\n.xplor-btn-icon--outlined.sc-xplor-btn-icon {\n  border: 1px solid currentColor;\n  box-shadow: none;\n}\n.xplor-btn-icon--tonal.sc-xplor-btn-icon {\n  box-shadow: none;\n}\n.xplor-btn-icon--primary.xplor-btn-icon--elevated.sc-xplor-btn-icon, .xplor-btn-icon--primary.xplor-btn-icon--text.sc-xplor-btn-icon {\n  background-color: #EC7702;\n  color: white;\n}\n.xplor-btn-icon--primary.xplor-btn-icon--outlined.sc-xplor-btn-icon {\n  background-color: transparent;\n  color: #EC7702;\n  border-color: #EC7702;\n}\n.xplor-btn-icon--primary.xplor-btn-icon--tonal.sc-xplor-btn-icon {\n  background-color: #FFF3E6;\n  color: #EC7702;\n}\n.xplor-btn-icon--primary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--elevated, .xplor-btn-icon--primary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--text {\n  background-color: #D66A02;\n}\n.xplor-btn-icon--primary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--tonal {\n  background-color: #FFE7CC;\n}\n.xplor-btn-icon--secondary.xplor-btn-icon--elevated.sc-xplor-btn-icon, .xplor-btn-icon--secondary.xplor-btn-icon--text.sc-xplor-btn-icon {\n  background-color: #008480;\n  color: white;\n}\n.xplor-btn-icon--secondary.xplor-btn-icon--outlined.sc-xplor-btn-icon {\n  background-color: transparent;\n  color: #008480;\n  border-color: #008480;\n}\n.xplor-btn-icon--secondary.xplor-btn-icon--tonal.sc-xplor-btn-icon {\n  background-color: #E6F7F7;\n  color: #008480;\n}\n.xplor-btn-icon--secondary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--elevated, .xplor-btn-icon--secondary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--text {\n  background-color: #006D6A;\n}\n.xplor-btn-icon--secondary.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--tonal {\n  background-color: #008480;\n  color: white;\n}\n.xplor-btn-icon--success.xplor-btn-icon--elevated.sc-xplor-btn-icon, .xplor-btn-icon--success.xplor-btn-icon--text.sc-xplor-btn-icon {\n  background-color: #489951;\n  color: white;\n}\n.xplor-btn-icon--success.xplor-btn-icon--outlined.sc-xplor-btn-icon {\n  background-color: transparent;\n  color: #489951;\n  border-color: #489951;\n}\n.xplor-btn-icon--success.xplor-btn-icon--tonal.sc-xplor-btn-icon {\n  background-color: #E8F5E9;\n  color: #489951;\n}\n.xplor-btn-icon--success.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--elevated, .xplor-btn-icon--success.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--text {\n  background-color: #3D8044;\n}\n.xplor-btn-icon--success.sc-xplor-btn-icon:hover:not(.xplor-btn-icon--disabled).xplor-btn-icon--tonal {\n  background-color: #D0EBD2;\n}\n.xplor-btn-icon--disabled.sc-xplor-btn-icon {\n  opacity: 0.38;\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+
+const XplorBtnIcon$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnIcon extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClick = createEvent(this, "xplorClick");
+        /**
+         * Button color variant
+         */
+        this.color = 'secondary';
+        /**
+         * Button size (can be pixel value like '32' or '48')
+         */
+        this.size = '32';
+        /**
+         * Icon size
+         */
+        this.iconSize = '18';
+        /**
+         * Visual variant
+         */
+        this.variant = 'elevated';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        this.handleClick = (event) => {
+            if (!this.disabled) {
+                this.xplorClick.emit(event);
+            }
+        };
+    }
+    render() {
+        const buttonClasses = {
+            'xplor-btn-icon': true,
+            [`xplor-btn-icon--${this.color}`]: true,
+            [`xplor-btn-icon--${this.variant}`]: true,
+            'xplor-btn-icon--disabled': this.disabled,
+        };
+        const buttonStyles = {
+            '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,
+            '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,
+        };
+        return (h(Host, { key: 'd5077956c7999278384896a9a7a6bc011a6c84fe' }, h("button", { key: '8c58f798cdfd47607c4d7275d1a1d3c63c34d96d', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, h("span", { key: 'b2da80152f63a20cd4c284103c344e1c95f76f10', class: "xplor-btn-icon__content" }, h("slot", { key: 'de99b1a981800af7c0639cb0d1188268a9a408e1' })))));
+    }
+    static get style() { return xplorBtnIconCss; }
+}, [6, "xplor-btn-icon", {
+        "color": [1],
+        "size": [8],
+        "iconSize": [8, "icon-size"],
+        "variant": [1],
+        "disabled": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnIcon$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnIcon = XplorBtnIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnIcon, defineCustomElement };
+//# sourceMappingURL=xplor-btn-icon.js.map
+
+//# sourceMappingURL=xplor-btn-icon.js.map