@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-chat-widget.js

@@ -0,0 +1,105 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-DIv_A5Gj.js';
+import { d as defineCustomElement$2 } from './p-CJGP2_5k.js';
+
+const xplorChatWidgetCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(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.container {\n  display: flex;\n  margin-top: 20px;\n}";
+
+const XplorChatWidget$1 = /*@__PURE__*/ proxyCustomElement(class XplorChatWidget extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.languageOptions = ['English', 'Spanish', 'French', 'German', 'Italian'];
+        this.textId = 'text';
+        this.selectedLanguage = 'English';
+        this.handleClick = () => {
+            // const ai = document.getElementsByClassName('ai-translate');
+            // Array loop throught ai html items and remap it and update
+            // each class should be seperated
+            debugger;
+            fetch('https://nnvy1fqqcb.execute-api.ap-southeast-2.amazonaws.com/ai_dev/ai/prompt-generation', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': this.apiKey, // Replace with your actual API key
+                },
+                body: JSON.stringify({
+                    service: null,
+                    action: 'translate',
+                    language: this.selectedLanguage,
+                    content: this.textValue || '',
+                }),
+            })
+                .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+                .then((data) => {
+                console.log('Success:', data);
+                this.textValue = data.response;
+            })
+                .catch((error) => {
+                console.error('Error:', error);
+            });
+        };
+        this.handleChange = (event) => {
+            const selectElement = event.target;
+            this.selectedLanguage = selectElement.value;
+            console.log('Selected language:', this.selectedLanguage);
+        };
+    }
+    componentDidLoad() {
+        var _a;
+        const element = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('text');
+        // we need to change this to a class so we can maniplulate multipule different spots with text.
+        if (element) {
+            this.textValue = element.textContent || '';
+            console.log('textValue:', this.textValue);
+        }
+    }
+    render() {
+        return (h(Host, { key: '19fe2c1cbe9c2f82779a3e9e6966db8e22988002' }, h("div", { key: 'b2d611ff824b3e4c9eff2c7eac45716219de2b96', id: "ai-text" }, this.textValue), h("div", { key: '96ca4702ebd751d3b6ab95a23ca1b762ef1be270', class: "container" }, h("xplor-dropdown", { key: '74a7468be12b73d97cf473cd7bb9bae99e62fa1b', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: '4177a337e0295507422bee77f90a26ea6ed3b12b', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
+    }
+    get host() { return this; }
+    static get style() { return xplorChatWidgetCss; }
+}, [1, "xplor-chat-widget", {
+        "languageOptions": [16, "language-options"],
+        "textId": [1, "text-id"],
+        "apiKey": [1, "api-key"],
+        "selectedLanguage": [32],
+        "textValue": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-chat-widget", "xplor-button", "xplor-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-chat-widget":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorChatWidget$1);
+            }
+            break;
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "xplor-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorChatWidget = XplorChatWidget$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorChatWidget, defineCustomElement };
+//# sourceMappingURL=xplor-chat-widget.js.map
+
+//# sourceMappingURL=xplor-chat-widget.js.map

package/dist/components/xplor-chat-widget.js.map

@@ -0,0 +1 @@
+{"file":"xplor-chat-widget.js","mappings":"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","names":["XplorChatWidget","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-chat-widget/xplor-chat-widget.scss?tag=xplor-chat-widget&encapsulation=shadow","src/components/xplor-chat-widget/xplor-chat-widget.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.container {\n  display: flex;\n  margin-top: 20px;\n}","import { Component, Element, Host, h, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-chat-widget',\n  styleUrl: 'xplor-chat-widget.scss',\n  shadow: true,\n})\nexport class XplorChatWidget {\n  @Prop() languageOptions: string[] = ['English', 'Spanish', 'French', 'German', 'Italian'];\n  @Prop() textId: string = 'text';\n  @Prop() apiKey: string; // TODO: add api key to the component\n  @Element() host: HTMLElement;\n  @State() selectedLanguage: string = 'English';\n  @State() textValue: string;\n  'Hoy, nos divertimos mucho explorando el mundo de la arcilla. Estaban totalmente absortos en el proceso, formando cuidadosamente la arcilla en diseños y patrones únicos. Desde animales coloridos hasta formas extravagantes, la imaginación de tu hijo no tuvo límites durante este día lleno de diversión.';\n\n  componentDidLoad() {\n    const element = this.host.shadowRoot?.getElementById('text');\n    // we need to change this to a class so we can maniplulate multipule different spots with text.\n    if (element) {\n      this.textValue = element.textContent || '';\n      console.log('textValue:', this.textValue);\n    }\n  }\n\n  handleClick = () => {\n    // const ai = document.getElementsByClassName('ai-translate');\n    // Array loop throught ai html items and remap it and update\n    // each class should be seperated\n    debugger;\n    fetch('https://nnvy1fqqcb.execute-api.ap-southeast-2.amazonaws.com/ai_dev/ai/prompt-generation', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        'x-api-key': this.apiKey, // Replace with your actual API key\n      },\n      body: JSON.stringify({\n        service: null,\n        action: 'translate',\n        language: this.selectedLanguage,\n        content: this.textValue || '',\n      }),\n    })\n      .then((response) => {\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n        return response.json();\n      })\n      .then((data) => {\n        console.log('Success:', data);\n        this.textValue = data.response;\n      })\n      .catch((error) => {\n        console.error('Error:', error);\n      });\n  };\n\n  handleChange = (event: Event) => {\n    const selectElement = event.target as HTMLSelectElement;\n    this.selectedLanguage = selectElement.value;\n    console.log('Selected language:', this.selectedLanguage);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div id=\"ai-text\">{this.textValue}</div>\n        <div class=\"container\">\n          <xplor-dropdown\n            options={this.languageOptions}\n            selected={this.selectedLanguage}\n            handleChange={this.handleChange}\n          />\n          <xplor-button text=\"translate\" mode=\"pg\" type=\"primary\" onClick={this.handleClick}></xplor-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/xplor-checkbox.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+
+const xplorCheckboxCss = "/* 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/* custom-checkbox.scss */\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.checkbox {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 2px solid #6b7280;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  position: relative;\n}\n.checkbox.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.checked {\n  background: #059669;\n  border-color: #059669;\n}\n.checkbox.checked.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.checked.hover .check-icon {\n  color: #059669;\n}\n.checkbox.checked.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.checked.focus .check-icon {\n  color: #059669;\n}\n.checkbox.checked.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.checked.pressed .check-icon {\n  color: #059669;\n}\n.checkbox.indeterminate {\n  background: #059669;\n  border-color: #059669;\n}\n.checkbox.indeterminate.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.indeterminate.hover .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.indeterminate.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.indeterminate.focus .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.indeterminate.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.indeterminate.pressed .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.error {\n  border-color: #ef4444;\n}\n.checkbox.error.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.checked {\n  background: #ef4444;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.hover .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.checked.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.checked.focus .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.checked.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.pressed .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate {\n  background: #ef4444;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.hover .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.indeterminate.focus .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.pressed .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: #d1d5db;\n  background: white;\n}\n.checkbox.disabled.checked, .checkbox.disabled.indeterminate {\n  background: #d1d5db;\n  border-color: #d1d5db;\n}\n\n.check-icon,\n.indeterminate-icon {\n  width: 16px;\n  height: 16px;\n  color: white;\n}\n\n.label {\n  font-size: 14px;\n  color: #374151;\n  user-select: none;\n}\n.checkbox.disabled ~ .label {\n  opacity: 0.4;\n}";
+
+const XplorCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.checkboxChange = createEvent(this, "checkboxChange");
+        this.initialChecked = false;
+        this.initialIndeterminate = false;
+        this.disabled = false;
+        this.error = false;
+        this.label = '';
+        this.checked = false;
+        this.indeterminate = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.indeterminate) {
+                // If indeterminate, go to checked state
+                this.indeterminate = false;
+                this.checked = true;
+            }
+            else {
+                // Toggle between checked and unchecked
+                this.checked = !this.checked;
+            }
+            this.checkboxChange.emit({
+                checked: this.checked,
+                indeterminate: this.indeterminate
+            });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.isPressed = true;
+                this.handleClick();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.isPressed = false;
+            }
+        };
+        this.getCheckboxClass = () => {
+            const classes = ['checkbox'];
+            if (this.checked)
+                classes.push('checked');
+            if (this.indeterminate)
+                classes.push('indeterminate');
+            if (this.disabled)
+                classes.push('disabled');
+            if (this.error)
+                classes.push('error');
+            if (this.isHovered && !this.disabled)
+                classes.push('hover');
+            if (this.isFocused && !this.disabled)
+                classes.push('focus');
+            if (this.isPressed && !this.disabled)
+                classes.push('pressed');
+            return classes.join(' ');
+        };
+    }
+    watchCheckedProp(newValue) {
+        this.checked = newValue;
+    }
+    watchIndeterminateProp(newValue) {
+        this.indeterminate = newValue;
+    }
+    componentWillLoad() {
+        this.checked = this.initialChecked;
+        this.indeterminate = this.initialIndeterminate;
+    }
+    render() {
+        return (h("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, h("div", { key: '4e1ea41fed9f07346be31da5436eeb4d8961d559', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString() }, this.checked && (h("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '25b2882bc42793685ce25b4a06ae35a3f33fb195', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+    }
+    static get watchers() { return {
+        "initialChecked": ["watchCheckedProp"],
+        "initialIndeterminate": ["watchIndeterminateProp"]
+    }; }
+    static get style() { return xplorCheckboxCss; }
+}, [1, "xplor-checkbox", {
+        "initialChecked": [4, "initial-checked"],
+        "initialIndeterminate": [4, "initial-indeterminate"],
+        "disabled": [4],
+        "error": [4],
+        "label": [1],
+        "checked": [32],
+        "indeterminate": [32],
+        "isHovered": [32],
+        "isFocused": [32],
+        "isPressed": [32]
+    }, undefined, {
+        "initialChecked": ["watchCheckedProp"],
+        "initialIndeterminate": ["watchIndeterminateProp"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorCheckbox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorCheckbox = XplorCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorCheckbox, defineCustomElement };
+//# sourceMappingURL=xplor-checkbox.js.map
+
+//# sourceMappingURL=xplor-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-checkbox.js","mappings":"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","names":["XplorCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-checkbox/xplor-checkbox.scss?tag=xplor-checkbox&encapsulation=shadow","src/components/xplor-checkbox/xplor-checkbox.tsx"],"sourcesContent":["/* custom-checkbox.scss */\n$color-gray-400: #d1d5db;\n$color-gray-600: #6b7280;\n$color-gray-700: #374151;\n$color-green-100: #d1fae5;\n$color-green-200: #a7f3d0;\n$color-green-300: #6ee7b7;\n$color-green-600: #059669;\n$color-red-100: #fee2e2;\n$color-red-200: #fecaca;\n$color-red-300: #fca5a5;\n$color-red-500: #ef4444;\n$color-white: white;\n\n$checkbox-size: 20px;\n$checkbox-radius: 4px;\n$border-width: 2px;\n$icon-size: 16px;\n$transition-speed: 0.15s;\n$focus-ring-opacity: 0.1;\n$disabled-opacity: 0.4;\n\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.checkbox {\n  width: $checkbox-size;\n  height: $checkbox-size;\n  border-radius: $checkbox-radius;\n  border: $border-width solid $color-gray-600;\n  background: $color-white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all $transition-speed ease;\n  outline: none;\n  position: relative;\n\n  // Hover state (unselected)\n  &.hover {\n    background: $color-green-100;\n    border-color: $color-green-600;\n  }\n\n  // Focus state (unselected)\n  &.focus {\n    background: $color-green-200;\n    border-color: $color-green-600;\n    box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n  }\n\n  // Pressed state (unselected)\n  &.pressed {\n    background: $color-green-300;\n    border-color: $color-green-600;\n  }\n\n  // Selected (checked) state\n  &.checked {\n    background: $color-green-600;\n    border-color: $color-green-600;\n\n    &.hover {\n      background: $color-green-100;\n      border-color: $color-green-600;\n\n      .check-icon {\n        color: $color-green-600;\n      }\n    }\n\n    &.focus {\n      background: $color-green-200;\n      border-color: $color-green-600;\n      box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n      .check-icon {\n        color: $color-green-600;\n      }\n    }\n\n    &.pressed {\n      background: $color-green-300;\n      border-color: $color-green-600;\n\n      .check-icon {\n        color: $color-green-600;\n      }\n    }\n  }\n\n  // Indeterminate state\n  &.indeterminate {\n    background: $color-green-600;\n    border-color: $color-green-600;\n\n    &.hover {\n      background: $color-green-100;\n      border-color: $color-green-600;\n\n      .indeterminate-icon {\n        color: $color-green-600;\n      }\n    }\n\n    &.focus {\n      background: $color-green-200;\n      border-color: $color-green-600;\n      box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n      .indeterminate-icon {\n        color: $color-green-600;\n      }\n    }\n\n    &.pressed {\n      background: $color-green-300;\n      border-color: $color-green-600;\n\n      .indeterminate-icon {\n        color: $color-green-600;\n      }\n    }\n  }\n\n  // Error state (unselected)\n  &.error {\n    border-color: $color-red-500;\n\n    &.hover {\n      background: $color-red-100;\n      border-color: $color-red-500;\n    }\n\n    &.focus {\n      background: $color-red-200;\n      border-color: $color-red-500;\n      box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n    }\n\n    &.pressed {\n      background: $color-red-300;\n      border-color: $color-red-500;\n    }\n\n    // Error + checked\n    &.checked {\n      background: $color-red-500;\n      border-color: $color-red-500;\n\n      &.hover {\n        background: $color-red-100;\n        border-color: $color-red-500;\n\n        .check-icon {\n          color: $color-red-500;\n        }\n      }\n\n      &.focus {\n        background: $color-red-200;\n        border-color: $color-red-500;\n        box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n        .check-icon {\n          color: $color-red-500;\n        }\n      }\n\n      &.pressed {\n        background: $color-red-300;\n        border-color: $color-red-500;\n\n        .check-icon {\n          color: $color-red-500;\n        }\n      }\n    }\n\n    // Error + indeterminate\n    &.indeterminate {\n      background: $color-red-500;\n      border-color: $color-red-500;\n\n      &.hover {\n        background: $color-red-100;\n        border-color: $color-red-500;\n\n        .indeterminate-icon {\n          color: $color-red-500;\n        }\n      }\n\n      &.focus {\n        background: $color-red-200;\n        border-color: $color-red-500;\n        box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n\n        .indeterminate-icon {\n          color: $color-red-500;\n        }\n      }\n\n      &.pressed {\n        background: $color-red-300;\n        border-color: $color-red-500;\n\n        .indeterminate-icon {\n          color: $color-red-500;\n        }\n      }\n    }\n  }\n\n  // Disabled state\n  &.disabled {\n    opacity: $disabled-opacity;\n    cursor: not-allowed;\n    border-color: $color-gray-400;\n    background: $color-white;\n\n    &.checked,\n    &.indeterminate {\n      background: $color-gray-400;\n      border-color: $color-gray-400;\n    }\n  }\n}\n\n.check-icon,\n.indeterminate-icon {\n  width: $icon-size;\n  height: $icon-size;\n  color: $color-white;\n}\n\n.label {\n  font-size: 14px;\n  color: $color-gray-700;\n  user-select: none;\n\n  .checkbox.disabled~& {\n    opacity: $disabled-opacity;\n  }\n}","import { Component, Prop, State, Event, EventEmitter, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-checkbox',\n  styleUrl: 'xplor-checkbox.scss',\n  shadow: true,\n})\nexport class XplorCheckbox {\n  @Prop() initialChecked: boolean = false;\n  @Prop() initialIndeterminate: boolean = false;\n\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() label: string = '';\n\n  @State() checked: boolean = false;\n  @State() indeterminate: boolean = false;\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n  @State() isPressed: boolean = false;\n\n  @Event() checkboxChange: EventEmitter<{ checked: boolean; indeterminate: boolean }>;\n\n  @Watch('initialChecked')\n  watchCheckedProp(newValue: boolean) {\n    this.checked = newValue;\n  }\n\n  @Watch('initialIndeterminate')\n  watchIndeterminateProp(newValue: boolean) {\n    this.indeterminate = newValue;\n  }\n\n  componentWillLoad() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  } private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.indeterminate) {\n      // If indeterminate, go to checked state\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      // Toggle between checked and unchecked\n      this.checked = !this.checked;\n    }\n\n    this.checkboxChange.emit({\n      checked: this.checked,\n      indeterminate: this.indeterminate\n    });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.isPressed = true;\n      this.handleClick();\n    }\n  };\n\n  private handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      this.isPressed = false;\n    }\n  };\n\n  private getCheckboxClass = () => {\n    const classes = ['checkbox'];\n\n    if (this.checked) classes.push('checked');\n    if (this.indeterminate) classes.push('indeterminate');\n    if (this.disabled) classes.push('disabled');\n    if (this.error) classes.push('error');\n    if (this.isHovered && !this.disabled) classes.push('hover');\n    if (this.isFocused && !this.disabled) classes.push('focus');\n    if (this.isPressed && !this.disabled) classes.push('pressed');\n\n    return classes.join(' ');\n  };\n\n  render() {\n    return (\n      <div class=\"checkbox-wrapper\">\n        <div\n          class={this.getCheckboxClass()}\n          onClick={this.handleClick}\n          onMouseEnter={() => this.isHovered = true}\n          onMouseLeave={() => this.isHovered = false}\n          onMouseDown={() => this.isPressed = true}\n          onMouseUp={() => this.isPressed = false}\n          onFocus={() => this.isFocused = true}\n          onBlur={() => this.isFocused = false}\n          onKeyDown={this.handleKeyDown}\n          onKeyUp={this.handleKeyUp}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.checked.toString()}\n          aria-disabled={this.disabled.toString()}\n        >\n          {this.checked && (\n            <svg class=\"check-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path\n                d=\"M13.3334 4L6.00002 11.3333L2.66669 8\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          )}\n          {this.indeterminate && (\n            <svg class=\"indeterminate-icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <path\n                d=\"M3.33331 8H12.6666\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          )}\n        </div>\n        {this.label && <span class=\"label\">{this.label}</span>}\n      </div>\n    );\n  }\n}"],"version":3}

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

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

package/dist/components/xplor-combobox.js

@@ -0,0 +1,279 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorComboboxCss = "@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-combobox {\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-combobox {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-combobox {\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-combobox {\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-combobox {\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-combobox {\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-combobox, ul.sc-xplor-combobox {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-combobox li.sc-xplor-combobox, ul.sc-xplor-combobox li.sc-xplor-combobox {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-combobox, ul.mdc-list.sc-xplor-combobox {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-combobox li.mdc-list-item.sc-xplor-combobox, ul.mdc-list.sc-xplor-combobox li.mdc-list-item.sc-xplor-combobox {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-combobox {\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-combobox {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-combobox {\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-combobox {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-combobox .mdc-text-field--outlined.sc-xplor-combobox .mdc-notched-outline__notch.sc-xplor-combobox {\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-combobox .mdc-notched-outline__notch.sc-xplor-combobox {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-combobox .mdc-notched-outline.sc-xplor-combobox .mdc-notched-outline__notch.sc-xplor-combobox {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-combobox {\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-combobox:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-combobox {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-combobox-h {\n  display: block;\n  width: 100%;\n}\n\n.combobox.sc-xplor-combobox {\n  position: relative;\n  width: 100%;\n}\n.combobox--disabled.sc-xplor-combobox {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.combobox--readonly.sc-xplor-combobox .combobox__input.sc-xplor-combobox {\n  background-color: #f5f5f5;\n}\n\n.combobox__label.sc-xplor-combobox {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #424242;\n  margin-bottom: 0.5rem;\n}\n\n.combobox__input-wrapper.sc-xplor-combobox {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  border: 1px solid #bdbdbd;\n  border-radius: 4px;\n  padding: 0.5rem;\n  background-color: #fff;\n  transition: border-color 0.2s, box-shadow 0.2s;\n}\n.combobox__input-wrapper.sc-xplor-combobox:focus-within {\n  border-color: #1976d2;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n\n.combobox__chips.sc-xplor-combobox {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n.combobox__chip.sc-xplor-combobox {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  background-color: #e8f5e9;\n  border-radius: 16px;\n  font-size: 0.875rem;\n  color: #2e7d32;\n}\n\n.combobox__chip-label.sc-xplor-combobox {\n  line-height: 1;\n}\n\n.combobox__chip-remove.sc-xplor-combobox {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2e7d32;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.combobox__chip-remove.sc-xplor-combobox:hover:not(:disabled) {\n  background-color: rgba(46, 125, 50, 0.1);\n}\n.combobox__chip-remove.sc-xplor-combobox:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.combobox__input.sc-xplor-combobox {\n  flex: 1;\n  min-width: 120px;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: 1rem;\n  padding: 0.25rem;\n  background: transparent;\n  color: #212121;\n}\n.combobox__input.sc-xplor-combobox::placeholder {\n  color: #9e9e9e;\n}\n.combobox__input.sc-xplor-combobox:disabled {\n  cursor: not-allowed;\n}\n.combobox__input[readonly].sc-xplor-combobox {\n  cursor: default;\n}\n\n.combobox__actions.sc-xplor-combobox {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n.combobox__clear.sc-xplor-combobox {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.combobox__clear.sc-xplor-combobox:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n\n.combobox__icon.sc-xplor-combobox {\n  font-size: 0.75rem;\n  color: #757575;\n  pointer-events: none;\n  transition: transform 0.2s;\n}\n.combobox--open.sc-xplor-combobox .combobox__icon.sc-xplor-combobox {\n  transform: rotate(180deg);\n}\n\n.combobox__dropdown.sc-xplor-combobox {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  max-height: 300px;\n  overflow-y: auto;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n}\n\n.combobox__item.sc-xplor-combobox {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  color: #212121;\n}\n.combobox__item.sc-xplor-combobox:hover:not(.combobox__item--disabled) {\n  background-color: #f5f5f5;\n}\n.combobox__item--highlighted.sc-xplor-combobox {\n  background-color: #e3f2fd;\n}\n.combobox__item--selected.sc-xplor-combobox {\n  background-color: #1976d2;\n  color: #fff;\n}\n.combobox__item--selected.sc-xplor-combobox:hover {\n  background-color: #1565c0;\n}\n.combobox__item--disabled.sc-xplor-combobox {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.combobox__item--create.sc-xplor-combobox {\n  background-color: #fff9c4;\n  border-top: 1px solid #e0e0e0;\n}\n.combobox__item--create.sc-xplor-combobox:hover {\n  background-color: #fff59d;\n}\n.combobox__item--create.combobox__item--highlighted.sc-xplor-combobox {\n  background-color: #fff176;\n}\n\n.combobox__create-label.sc-xplor-combobox {\n  color: #757575;\n  font-size: 0.875rem;\n}\n\n.combobox__no-results.sc-xplor-combobox {\n  padding: 1rem;\n  text-align: center;\n  color: #757575;\n  font-size: 0.875rem;\n}";
+
+const XplorCombobox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCombobox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorChange = createEvent(this, "xplorChange");
+        this.xplorSelect = createEvent(this, "xplorSelect");
+        this.xplorCreate = createEvent(this, "xplorCreate");
+        this.xplorClear = createEvent(this, "xplorClear");
+        this.xplorSearch = createEvent(this, "xplorSearch");
+        /**
+         * Array of items to display in the dropdown
+         */
+        this.items = [];
+        /**
+         * Selected value(s)
+         */
+        this.value = null;
+        /**
+         * Placeholder text
+         */
+        this.placeholder = 'Type to search or add...';
+        /**
+         * Disable the combobox
+         */
+        this.disabled = false;
+        /**
+         * Make the combobox readonly
+         */
+        this.readonly = false;
+        /**
+         * Clear button
+         */
+        this.clearable = false;
+        /**
+         * Allow multiple selection
+         */
+        this.multiple = false;
+        /**
+         * Allow creating new items
+         */
+        this.allowCustom = true;
+        /**
+         * Message to display when creating new item
+         */
+        this.createMessage = 'Create';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.highlightedIndex = -1;
+        this.customItems = [];
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = true;
+            this.highlightedIndex = -1;
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.searchQuery = input.value;
+            this.filterItems();
+            this.isOpen = true;
+            this.highlightedIndex = -1;
+            this.xplorSearch.emit(this.searchQuery);
+            if (!this.multiple && this.searchQuery === '') {
+                this.value = null;
+                this.xplorChange.emit(null);
+            }
+        };
+        this.handleInputKeyDown = (event) => {
+            var _a;
+            if (this.disabled || this.readonly)
+                return;
+            const totalItems = this.filteredItems.length + (this.canCreateNew() ? 1 : 0);
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, totalItems - 1);
+                    this.scrollToHighlighted();
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+                    this.scrollToHighlighted();
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.highlightedIndex >= 0) {
+                        if (this.highlightedIndex < this.filteredItems.length) {
+                            this.selectItem(this.filteredItems[this.highlightedIndex]);
+                        }
+                        else if (this.canCreateNew()) {
+                            this.createNewItem();
+                        }
+                    }
+                    else if (this.canCreateNew() && this.searchQuery.trim() !== '') {
+                        this.createNewItem();
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.isOpen = false;
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                    break;
+                case 'Backspace':
+                    if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {
+                        event.preventDefault();
+                        this.removeItem(this.selectedItems[this.selectedItems.length - 1]);
+                    }
+                    break;
+            }
+        };
+        this.handleClear = () => {
+            var _a;
+            this.value = this.multiple ? [] : null;
+            this.selectedItems = [];
+            this.searchQuery = '';
+            this.filterItems();
+            this.xplorChange.emit(this.value);
+            this.xplorClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    componentWillLoad() {
+        this.filterItems();
+        if (this.value !== null) {
+            if (this.multiple && Array.isArray(this.value)) {
+                this.selectedItems = this.value;
+            }
+            else if (!this.multiple) {
+                const allItems = [...this.items, ...this.customItems];
+                const selectedItem = allItems.find(item => item.value === this.value);
+                if (selectedItem) {
+                    this.searchQuery = selectedItem.label;
+                }
+            }
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    filterItems() {
+        const query = this.searchQuery.toLowerCase();
+        const allItems = [...this.items, ...this.customItems];
+        if (query === '') {
+            this.filteredItems = allItems;
+            return;
+        }
+        this.filteredItems = allItems.filter(item => item.label.toLowerCase().includes(query));
+    }
+    canCreateNew() {
+        if (!this.allowCustom || this.searchQuery.trim() === '') {
+            return false;
+        }
+        const allItems = [...this.items, ...this.customItems];
+        const exactMatch = allItems.some(item => item.label.toLowerCase() === this.searchQuery.toLowerCase());
+        return !exactMatch;
+    }
+    scrollToHighlighted() {
+        if (this.dropdownEl && this.highlightedIndex >= 0) {
+            const highlightedEl = this.dropdownEl.querySelector(`[data-index="${this.highlightedIndex}"]`);
+            if (highlightedEl) {
+                highlightedEl.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }
+    selectItem(item) {
+        var _a;
+        if (item.disabled)
+            return;
+        if (this.multiple) {
+            if (!this.selectedItems.includes(item.value)) {
+                this.selectedItems = [...this.selectedItems, item.value];
+                this.value = this.selectedItems;
+                this.xplorChange.emit(this.value);
+            }
+            this.searchQuery = '';
+            this.filterItems();
+        }
+        else {
+            this.value = item.value;
+            this.searchQuery = item.label;
+            this.isOpen = false;
+            this.xplorChange.emit(this.value);
+        }
+        this.xplorSelect.emit(item);
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    createNewItem() {
+        const newValue = this.searchQuery.trim();
+        const newItem = {
+            label: newValue,
+            value: newValue,
+        };
+        this.customItems = [...this.customItems, newItem];
+        this.selectItem(newItem);
+        this.xplorCreate.emit(newValue);
+    }
+    removeItem(value) {
+        this.selectedItems = this.selectedItems.filter(v => v !== value);
+        this.value = this.selectedItems;
+        this.xplorChange.emit(this.value);
+    }
+    getSelectedItemLabel(value) {
+        const allItems = [...this.items, ...this.customItems];
+        const item = allItems.find(i => i.value === value);
+        return item ? item.label : value;
+    }
+    render() {
+        const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
+        const showCreateOption = this.canCreateNew();
+        return (h(Host, { key: '64bfbc829a52c048f8270ab328f73607bd94ebc1' }, h("div", { key: '25d9cf959f68c555befdfd5d2351cbb1964b1e46', class: {
+                'combobox': true,
+                'combobox--disabled': this.disabled,
+                'combobox--readonly': this.readonly,
+                'combobox--open': this.isOpen,
+            } }, this.label && (h("label", { key: '5d6afc2c5c9b3c84abca67469b87c1acb88b9517', class: "combobox__label" }, this.label)), h("div", { key: '5d7666d518792cc71c7062453f308771499056f9', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: 'c16c2887b644a9c47034b70a949a7d4dcc403233', class: "combobox__chips" }, this.selectedItems.map(value => (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, this.getSelectedItemLabel(value)), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")))))), h("input", { key: '28721137cc8339ac1c0881319dc4718ed2c04cf2', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off" }), h("div", { key: 'ba914008002039d274efd11f9790e9d13613a048', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '3b442197e1a6e0b94157dfb6f3a5d5e5529419dc', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("span", { key: 'cdafaeb0392798f291892342d50a0cec7234b7a1', class: "combobox__icon" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: 'd50da0e18e34a079345c13498efbf3c61fb6be28', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el) }, this.filteredItems.map((item, index) => (h("div", { key: item.value, "data-index": index, class: {
+                'combobox__item': true,
+                'combobox__item--highlighted': index === this.highlightedIndex,
+                'combobox__item--selected': this.multiple
+                    ? this.selectedItems.includes(item.value)
+                    : this.value === item.value,
+                'combobox__item--disabled': item.disabled,
+            }, onClick: () => this.selectItem(item) }, item.label))), showCreateOption && (h("div", { key: '9801a00634c1b6a1ed4bf1f97dc5c5321dc8c189', "data-index": this.filteredItems.length, class: {
+                'combobox__item': true,
+                'combobox__item--create': true,
+                'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
+            }, onClick: () => this.createNewItem() }, h("span", { key: '4d563ce7576c3caa2b343bfe18dbdf2c29f0ceb2', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e792de9d6e8586757271e0838b9035da7c3f47cb' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: 'f163e417e711ec833320a8f6d687a3202741b1fe', class: "combobox__dropdown" }, h("div", { key: '30831097ffecac58be272ff9fe6931e2d7bd4a34', class: "combobox__no-results" }, "No results found"))))));
+    }
+    get el() { return this; }
+    static get style() { return xplorComboboxCss; }
+}, [2, "xplor-combobox", {
+        "items": [16],
+        "value": [1032],
+        "placeholder": [1],
+        "label": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "clearable": [4],
+        "multiple": [4],
+        "allowCustom": [4, "allow-custom"],
+        "createMessage": [1, "create-message"],
+        "isOpen": [32],
+        "searchQuery": [32],
+        "filteredItems": [32],
+        "selectedItems": [32],
+        "highlightedIndex": [32],
+        "customItems": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-combobox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-combobox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorCombobox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorCombobox = XplorCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorCombobox, defineCustomElement };
+//# sourceMappingURL=xplor-combobox.js.map
+
+//# sourceMappingURL=xplor-combobox.js.map