@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-input-text-secondary.js

@@ -0,0 +1,95 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputTextSecondaryCss = "@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-input-text-secondary {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text-secondary {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text-secondary {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text-secondary, ul.sc-xplor-input-text-secondary {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary, ul.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-secondary {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text-secondary {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-secondary {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text-secondary {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-secondary .mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text-secondary {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text-secondary:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text-secondary {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-secondary-h {\n  display: block;\n}\n\n.input-secondary.sc-xplor-input-text-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.input-secondary__label.sc-xplor-input-text-secondary {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.input-secondary__required.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.input-secondary__field.sc-xplor-input-text-secondary {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.input-secondary__input.sc-xplor-input-text-secondary {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 16px;\n  outline: none;\n  transition: border-color 0.2s ease, border-width 0.2s ease;\n}\n.input-secondary__input.sc-xplor-input-text-secondary::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.input-secondary__input.sc-xplor-input-text-secondary:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.input-secondary--dirty.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary--error.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #d32f2f;\n}\n.input-secondary__details.sc-xplor-input-text-secondary {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.input-secondary__error-message.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n}\n.input-secondary__helper-text.sc-xplor-input-text-secondary {\n  color: rgba(0, 0, 0, 0.6);\n}";
+
+const XplorInputTextSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTextSecondary extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorInput = createEvent(this, "xplorInput");
+        this.xplorChange = createEvent(this, "xplorChange");
+        this.xplorFocus = createEvent(this, "xplorFocus");
+        this.xplorBlur = createEvent(this, "xplorBlur");
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.type = 'text';
+        this.bgColor = 'white';
+        this.disabled = false;
+        this.readonly = false;
+        this.hideDetails = 'auto';
+        this.error = '';
+        this.helperText = '';
+        this.required = false;
+        this.isDirty = false;
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.xplorFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.xplorBlur.emit(event);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'input-secondary': true,
+            'input-secondary--focused': this.isFocused,
+            'input-secondary--disabled': this.disabled,
+            'input-secondary--error': !!this.error,
+            'input-secondary--dirty': this.isDirty,
+        };
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
+        return (h(Host, { key: 'd7b5a95dba54e640b3bc0fb0e5e5ad07d209f21c' }, h("div", { key: 'dc0cc65fb5f74f8ed8f173c0736899afb5201ad1', class: containerClasses }, this.label && (h("label", { key: '328c402c4e0a05252ea0dd965c7b274c06e99864', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '6c4217b11971405df02ee5a7a07ece655860cabf', class: "input-secondary__required" }, "*"))), h("div", { key: '30179854ac1c1eaa8a6c3f39cdf7a0fff4c45103', class: "input-secondary__field" }, h("input", { key: 'ddb142835cf10d39fea9ff1b2023ed0cad968f9f', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                backgroundColor: this.bgColor,
+            } }), h("slot", { key: 'a2a0a03935964ba65591508ec50081323ac2c33a', name: "append-inner" })), showDetails && (h("div", { key: 'f3b0025dbaaf4a6bbbef5d1f0edd5866e0e79267', class: "input-secondary__details" }, this.error && h("div", { key: '91835745a04b17003b3c2254c6a5c405d36f3b08', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '96948fed46bb7765699a57c1017d0dbe3c4e2ec7', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: 'e0ef7c8cea7a11cc05636e3d020737957fc49040', name: "append" }))));
+    }
+    static get style() { return xplorInputTextSecondaryCss; }
+}, [6, "xplor-input-text-secondary", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "type": [1],
+        "bgColor": [1, "bg-color"],
+        "disabled": [4],
+        "readonly": [4],
+        "hideDetails": [8, "hide-details"],
+        "error": [1],
+        "helperText": [1, "helper-text"],
+        "required": [4],
+        "isDirty": [4, "is-dirty"],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-text-secondary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-text-secondary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputTextSecondary$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInputTextSecondary = XplorInputTextSecondary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputTextSecondary, defineCustomElement };
+//# sourceMappingURL=xplor-input-text-secondary.js.map
+
+//# sourceMappingURL=xplor-input-text-secondary.js.map

package/dist/components/xplor-input-text-secondary.js.map

@@ -0,0 +1 @@
+{"file":"xplor-input-text-secondary.js","mappings":"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","names":["XplorInputTextSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-secondary/xplor-input-text-secondary.scss?tag=xplor-input-text-secondary&encapsulation=scoped","src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.input-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n\n  &__label {\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  &__input {\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 16px;\n    outline: none;\n    transition: border-color 0.2s ease, border-width 0.2s ease;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:hover:not(:disabled) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n\n    &:focus {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n\n    &:disabled {\n      background-color: rgba(0, 0, 0, 0.04);\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n    }\n\n    &:read-only {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n\n  &--dirty {\n    .input-secondary__input {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n  }\n\n  &--error {\n    .input-secondary__input {\n      border-color: #d32f2f;\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n\n  &__helper-text {\n    color: rgba(0, 0, 0, 0.6);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-text-secondary',\n  styleUrl: 'xplor-input-text-secondary.scss',\n  scoped: true,\n})\nexport class XplorInputTextSecondary {\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() type: string = 'text';\n  @Prop() bgColor: string = 'white';\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() error: string = '';\n  @Prop() helperText: string = '';\n  @Prop() required: boolean = false;\n  @Prop() isDirty: boolean = false;\n\n  @Event() xplorInput: EventEmitter<string>;\n  @Event() xplorChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const containerClasses = {\n      'input-secondary': true,\n      'input-secondary--focused': this.isFocused,\n      'input-secondary--disabled': this.disabled,\n      'input-secondary--error': !!this.error,\n      'input-secondary--dirty': this.isDirty,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"input-secondary__label\">\n              {this.label}\n              {this.required && <span class=\"input-secondary__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"input-secondary__field\">\n            <input\n              type={this.type}\n              class=\"input-secondary__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n            />\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"input-secondary__details\">\n              {this.error && <div class=\"input-secondary__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"input-secondary__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-input-text.d.ts

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

package/dist/components/xplor-input-text.js

@@ -0,0 +1,130 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputTextCss = "@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-input-text {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text, ul.sc-xplor-input-text {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n  display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.xplor-input-text__input.sc-xplor-input-text {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text__input.sc-xplor-input-text:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n}\n.xplor-input-text__details.sc-xplor-input-text {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.6);\n}";
+
+const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorInput = createEvent(this, "xplorInput");
+        this.xplorChange = createEvent(this, "xplorChange");
+        this.xplorFocus = createEvent(this, "xplorFocus");
+        this.xplorBlur = createEvent(this, "xplorBlur");
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Input type (text, email, password, number, etc.)
+         */
+        this.type = 'text';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Whether to hide validation details
+         */
+        this.hideDetails = 'auto';
+        /**
+         * Error message
+         */
+        this.error = '';
+        /**
+         * Helper text
+         */
+        this.helperText = '';
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.xplorFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.xplorBlur.emit(event);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-text': true,
+            'xplor-input-text--focused': this.isFocused,
+            'xplor-input-text--disabled': this.disabled,
+            'xplor-input-text--error': !!this.error,
+        };
+        const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
+        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                backgroundColor: this.bgColor,
+            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', name: "append" }))));
+    }
+    static get style() { return xplorInputTextCss; }
+}, [6, "xplor-input-text", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "type": [1],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "hideDetails": [8, "hide-details"],
+        "error": [1],
+        "helperText": [1, "helper-text"],
+        "required": [4],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputText$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInputText = XplorInputText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputText, defineCustomElement };
+//# sourceMappingURL=xplor-input-text.js.map
+
+//# sourceMappingURL=xplor-input-text.js.map

package/dist/components/xplor-input-text.js.map

@@ -0,0 +1 @@
+{"file":"xplor-input-text.js","mappings":"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","names":["XplorInputText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text/xplor-input-text.scss?tag=xplor-input-text&encapsulation=scoped","src/components/xplor-input-text/xplor-input-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n\n  &__label {\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  &__input {\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    outline: none;\n    transition: border-color 0.2s ease;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:hover:not(:disabled) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n\n    &:focus {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n\n    &:disabled {\n      background-color: rgba(0, 0, 0, 0.04);\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n    }\n\n    &:read-only {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n\n  &--error {\n    .xplor-input-text__input {\n      border-color: #d32f2f;\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n\n  &__helper-text {\n    color: rgba(0, 0, 0, 0.6);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-text',\n  styleUrl: 'xplor-input-text.scss',\n  scoped: true,\n})\nexport class XplorInputText {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Focus event\n   */\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Blur event\n   */\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-text': true,\n      'xplor-input-text--focused': this.isFocused,\n      'xplor-input-text--disabled': this.disabled,\n      'xplor-input-text--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-text__label\">\n              {this.label}\n              {this.required && <span class=\"xplor-input-text__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-text__field\">\n            <input\n              type={this.type}\n              class=\"xplor-input-text__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n            />\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text__details\">\n              {this.error && <div class=\"xplor-input-text__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-input-title.d.ts

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

package/dist/components/xplor-input-title.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputTitleCss = "@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-input-title {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-title {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-title {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-title {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-title {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-title {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-title, ul.sc-xplor-input-title {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-title li.sc-xplor-input-title, ul.sc-xplor-input-title li.sc-xplor-input-title {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-title, ul.mdc-list.sc-xplor-input-title {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-title li.mdc-list-item.sc-xplor-input-title, ul.mdc-list.sc-xplor-input-title li.mdc-list-item.sc-xplor-input-title {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-title {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-title {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-title {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-title {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-title .mdc-text-field--outlined.sc-xplor-input-title .mdc-notched-outline__notch.sc-xplor-input-title {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-title .mdc-notched-outline__notch.sc-xplor-input-title {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-title .mdc-notched-outline.sc-xplor-input-title .mdc-notched-outline__notch.sc-xplor-input-title {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-title {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-title:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-title {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-title-h {\n  display: block;\n}\n\n.xplor-input-title.sc-xplor-input-title {\n  width: 100%;\n  height: 39px;\n  font-size: 28px;\n  font-family: inherit;\n  font-weight: 400;\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n  outline: none;\n  padding: 0 0 4px 0;\n  background: transparent;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-title.sc-xplor-input-title::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-title.sc-xplor-input-title:hover:not(:disabled) {\n  border-bottom-color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-title.sc-xplor-input-title:focus {\n  border-bottom-width: 2px;\n  border-bottom-color: #008480;\n  padding-bottom: 3px;\n}\n.xplor-input-title.sc-xplor-input-title:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  border-bottom-color: rgba(0, 0, 0, 0.26);\n  cursor: not-allowed;\n}\n.xplor-input-title.sc-xplor-input-title:read-only {\n  color: rgba(0, 0, 0, 0.6);\n}";
+
+const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorInput = createEvent(this, "xplorInput");
+        this.xplorChange = createEvent(this, "xplorChange");
+        /**
+         * Input value
+         */
+        this.value = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = '';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is readonly
+         */
+        this.readonly = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorInput.emit(this.value);
+        };
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.xplorChange.emit(this.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+    }
+    static get style() { return xplorInputTitleCss; }
+}, [2, "xplor-input-title", {
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [4],
+        "readonly": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-title"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-title":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputTitle$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInputTitle = XplorInputTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputTitle, defineCustomElement };
+//# sourceMappingURL=xplor-input-title.js.map
+
+//# sourceMappingURL=xplor-input-title.js.map

package/dist/components/xplor-input-title.js.map

@@ -0,0 +1 @@
+{"file":"xplor-input-title.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,s/OAAs/O;;MCOpgPA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAYzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAkBF;IAhBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-title/xplor-input-title.scss?tag=xplor-input-title&encapsulation=scoped","src/components/xplor-input-title/xplor-input-title.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-title {\n  width: 100%;\n  height: 39px;\n  font-size: 28px;\n  font-family: inherit;\n  font-weight: 400;\n  border: none;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n  outline: none;\n  padding: 0 0 4px 0;\n  background: transparent;\n  transition: border-color 0.2s ease;\n\n  &::placeholder {\n    color: rgba(0, 0, 0, 0.38);\n  }\n\n  &:hover:not(:disabled) {\n    border-bottom-color: rgba(0, 0, 0, 0.87);\n  }\n\n  &:focus {\n    border-bottom-width: 2px;\n    border-bottom-color: #008480;\n    padding-bottom: 3px;\n  }\n\n  &:disabled {\n    color: rgba(0, 0, 0, 0.38);\n    border-bottom-color: rgba(0, 0, 0, 0.26);\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    color: rgba(0, 0, 0, 0.6);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-title',\n  styleUrl: 'xplor-input-title.scss',\n  scoped: true,\n})\nexport class XplorInputTitle {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          type=\"text\"\n          class=\"xplor-input-title\"\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/xplor-links.js

@@ -0,0 +1,39 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorLinksCss = ":host{display:block}.x-link{display:block;padding:0.5rem 0;text-decoration:none;color:var(--xplor-link-color)}";
+
+const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+    }
+    static get style() { return xplorLinksCss; }
+}, [1, "xplor-links", {
+        "brand": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-links"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-links":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorLinks$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorLinks = XplorLinks$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorLinks, defineCustomElement };
+//# sourceMappingURL=xplor-links.js.map
+
+//# sourceMappingURL=xplor-links.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-links.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gHAAgH;;MCMzHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;IAErB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACxC,GAAG,4BACmB,GAAG,CACxB,EACJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6CAA6C,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAA,4CAAA,CAAgD,CAC9E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2DAA2D,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6EAA6E,EAElF,EAAA,qBAAA,CAAA,EACL,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,8BAA8B,EAAA,EAAA,6IAAA,CAGnC,CACA,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE,EAAA,EACpF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAC,EAAE,EACN,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wDAAwD,EAAsB,EAAA,kBAAA,CAAA,EACxF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yCAAyC,EAAA,EAAA,kBAAA,CAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorLinks","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-links/xplor-links.css?tag=xplor-links&encapsulation=shadow","src/components/xplor-links/xplor-links.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n.x-link {\n  display: block;\n  padding: 0.5rem 0;\n  text-decoration: none;\n  color: var(--xplor-link-color);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n  tag: 'xplor-links',\n  styleUrl: 'xplor-links.css',\n  shadow: true,\n})\nexport class XplorLinks {\n  @Prop() brand: string;\n  render() {\n    return (\n      <Host class={`theme-${this.brand}`}>\n        <a class=\"x-link\" href=\"https://google.com\">\n          {' '}\n          googole this is a link{' '}\n        </a>\n        <div class=\"bg-black p-2 rounded-md flex justify-center\">\n          <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n        </div>\n        <div class=\"bg-white py-24 sm:py-32\">\n          <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n            <div class=\"max-w-xl\">\n              <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n                Meet our leadership\n              </h2>\n              <p class=\"mt-6 text-lg/8 text-gray-600\">\n                We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n                best results for our clients.\n              </p>\n            </div>\n            <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n              <li>\n                <div class=\"flex items-center gap-x-6\">\n                  <img\n                    class=\"size-16 rounded-full\"\n                    src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\"\n                    alt=\"\"\n                  />\n                  <div>\n                    <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n                    <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n                  </div>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-modal-persistent.d.ts

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

package/dist/components/xplor-modal-persistent.js

@@ -0,0 +1,66 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-DKh6y3GY.js';
+
+const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModalPersistent extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClose = createEvent(this, "xplorClose");
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+        /**
+         * Modal width
+         */
+        this.width = '600px';
+        /**
+         * Maximum width
+         */
+        this.maxWidth = '90%';
+        /**
+         * Maximum height
+         */
+        this.maxHeight = '90%';
+        /**
+         * Loading state
+         */
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+    }
+}, [4, "xplor-modal-persistent", {
+        "open": [4],
+        "width": [1],
+        "maxWidth": [1, "max-width"],
+        "maxHeight": [1, "max-height"],
+        "loading": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-modal-persistent", "xplor-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-modal-persistent":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorModalPersistent$1);
+            }
+            break;
+        case "xplor-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorModalPersistent = XplorModalPersistent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorModalPersistent, defineCustomElement };
+//# sourceMappingURL=xplor-modal-persistent.js.map
+
+//# sourceMappingURL=xplor-modal-persistent.js.map

package/dist/components/xplor-modal-persistent.js.map

@@ -0,0 +1 @@
+{"file":"xplor-modal-persistent.js","mappings":";;;MAMaA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AAJjC,IAAA,WAAA,GAAA;;;;AAKE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE7B;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,KAAK;AAEhC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AA2BjC;IApBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,EAE1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAG,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAG,CAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAG,CAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,CAC1B,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorModalPersistent","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-modal-persistent/xplor-modal-persistent.tsx"],"sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal-persistent',\n  shadow: false,\n})\nexport class XplorModalPersistent {\n  /**\n   * Whether the modal is open\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        <xplor-modal\n          open={this.open}\n          width={this.width}\n          maxWidth={this.maxWidth}\n          maxHeight={this.maxHeight}\n          loading={this.loading}\n          persistent={true}\n          onXplorClose={() => this.xplorClose.emit()}\n        >\n          <slot name=\"title\" slot=\"title\" />\n          <slot name=\"subtitle\" slot=\"subtitle\" />\n          <slot name=\"body\" slot=\"body\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </xplor-modal>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/xplor-modal.js

@@ -0,0 +1,9 @@
+import { X as XplorModal$1, d as defineCustomElement$1 } from './p-DKh6y3GY.js';
+
+const XplorModal = XplorModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorModal, defineCustomElement };
+//# sourceMappingURL=xplor-modal.js.map
+
+//# sourceMappingURL=xplor-modal.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/xplor-nav-tabs.d.ts

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