@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-inline-switch.d.ts

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

package/dist/components/xplor-inline-switch.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInlineSwitchCss = "@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-inline-switch {\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-inline-switch {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-inline-switch {\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-inline-switch {\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-inline-switch {\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-inline-switch {\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-inline-switch, ul.sc-xplor-inline-switch {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-inline-switch li.sc-xplor-inline-switch, ul.sc-xplor-inline-switch li.sc-xplor-inline-switch {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-inline-switch, ul.mdc-list.sc-xplor-inline-switch {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-inline-switch li.mdc-list-item.sc-xplor-inline-switch, ul.mdc-list.sc-xplor-inline-switch li.mdc-list-item.sc-xplor-inline-switch {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-inline-switch {\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-inline-switch {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-inline-switch {\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-inline-switch {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-inline-switch .mdc-text-field--outlined.sc-xplor-inline-switch .mdc-notched-outline__notch.sc-xplor-inline-switch {\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-inline-switch .mdc-notched-outline__notch.sc-xplor-inline-switch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-inline-switch .mdc-notched-outline.sc-xplor-inline-switch .mdc-notched-outline__notch.sc-xplor-inline-switch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-inline-switch {\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-inline-switch:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-inline-switch {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-inline-switch-h {\n  display: inline-block;\n}\n\n.xplor-inline-switch.sc-xplor-inline-switch {\n  --switch-color: #008480;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  user-select: none;\n}\n.xplor-inline-switch__input.sc-xplor-inline-switch {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.xplor-inline-switch__input.sc-xplor-inline-switch:disabled {\n  cursor: not-allowed;\n}\n.xplor-inline-switch__track.sc-xplor-inline-switch {\n  position: relative;\n  width: 2.25rem;\n  height: 1.25rem;\n  background-color: rgba(0, 0, 0, 0.38);\n  border-radius: 0.625rem;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-inline-switch__thumb.sc-xplor-inline-switch {\n  position: absolute;\n  top: 0.125rem;\n  left: 0.125rem;\n  width: 1rem;\n  height: 1rem;\n  background-color: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n.xplor-inline-switch__label.sc-xplor-inline-switch {\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-inline-switch--checked.sc-xplor-inline-switch .xplor-inline-switch__track.sc-xplor-inline-switch {\n  background-color: var(--switch-color);\n}\n.xplor-inline-switch--checked.sc-xplor-inline-switch .xplor-inline-switch__thumb.sc-xplor-inline-switch {\n  transform: translateX(1rem);\n}\n.xplor-inline-switch--disabled.sc-xplor-inline-switch {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n.xplor-inline-switch--disabled.sc-xplor-inline-switch .xplor-inline-switch__track.sc-xplor-inline-switch {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n.xplor-inline-switch--disabled.sc-xplor-inline-switch .xplor-inline-switch__label.sc-xplor-inline-switch {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-inline-switch--disabled.xplor-inline-switch--checked.sc-xplor-inline-switch .xplor-inline-switch__track.sc-xplor-inline-switch {\n  background-color: var(--switch-color);\n  opacity: 0.5;\n}\n.xplor-inline-switch--disabled.xplor-inline-switch--checked.sc-xplor-inline-switch .xplor-inline-switch__thumb.sc-xplor-inline-switch {\n  background-color: white;\n}\n.xplor-inline-switch.sc-xplor-inline-switch:not(.xplor-inline-switch--disabled):hover .xplor-inline-switch__thumb.sc-xplor-inline-switch {\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n}\n.xplor-inline-switch__input.sc-xplor-inline-switch:focus + .xplor-inline-switch__track.sc-xplor-inline-switch {\n  outline: 2px solid var(--switch-color);\n  outline-offset: 2px;\n}";
+
+const XplorInlineSwitch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInlineSwitch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorChange = createEvent(this, "xplorChange");
+        /**
+         * Checked state
+         */
+        this.checked = false;
+        /**
+         * Switch color (applies when checked)
+         */
+        this.color = '#008480';
+        /**
+         * Whether the switch is disabled
+         */
+        this.disabled = false;
+        /**
+         * Label text
+         */
+        this.label = '';
+        this.handleChange = (event) => {
+            const target = event.target;
+            this.checked = target.checked;
+            this.xplorChange.emit(this.checked);
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-inline-switch': true,
+            'xplor-inline-switch--disabled': this.disabled,
+            'xplor-inline-switch--checked': this.checked,
+        };
+        return (h(Host, { key: '02ad648d6ff7606f9801fd7900afd96725bd127f' }, h("label", { key: '7b981a71ec242a3ced40544f84b10975bed2a9ba', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '79e95af6e8d77c24471441542638bd2b8eb1781a', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: 'a44af41de8093b31f20bcee05aa755775cc2d399', class: "xplor-inline-switch__track" }, h("span", { key: '42b43f6ce8672a04efd673822558fe083223ecc0', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: 'c0393b42d7f2974f3f545e18d4a202d55c7eb98f', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '467c6d0a8f46a8fe5720071d6eedd99f2872835e' }))));
+    }
+    static get style() { return xplorInlineSwitchCss; }
+}, [6, "xplor-inline-switch", {
+        "checked": [1028],
+        "value": [8],
+        "color": [1],
+        "disabled": [4],
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-inline-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-inline-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInlineSwitch$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInlineSwitch = XplorInlineSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInlineSwitch, defineCustomElement };
+//# sourceMappingURL=xplor-inline-switch.js.map
+
+//# sourceMappingURL=xplor-inline-switch.js.map

package/dist/components/xplor-inline-switch.js.map

@@ -0,0 +1 @@
+{"file":"xplor-inline-switch.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,snSAAsnS;;MCOtoSA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAOjD;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAOlB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACrC,SAAC;AA6BF;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,qBAAqB,EAAE,IAAI;YAC3B,+BAA+B,EAAE,IAAI,CAAC,QAAQ;YAC9C,8BAA8B,EAAE,IAAI,CAAC,OAAO;SAC7C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,EAAA,EACrE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAA,CAAQ,CAC3C,EACN,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EAC3E,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInlineSwitch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-inline-switch/xplor-inline-switch.scss?tag=xplor-inline-switch&encapsulation=scoped","src/components/xplor-inline-switch/xplor-inline-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-inline-switch {\n  --switch-color: #008480;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  user-select: none;\n\n  &__input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__track {\n    position: relative;\n    width: 2.25rem;\n    height: 1.25rem;\n    background-color: rgba(0, 0, 0, 0.38);\n    border-radius: 0.625rem;\n    transition: background-color 0.2s ease;\n    flex-shrink: 0;\n  }\n\n  &__thumb {\n    position: absolute;\n    top: 0.125rem;\n    left: 0.125rem;\n    width: 1rem;\n    height: 1rem;\n    background-color: white;\n    border-radius: 50%;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  }\n\n  &__label {\n    font-size: 1rem;\n    color: rgba(0, 0, 0, 0.87);\n  }\n\n  // Checked state\n  &--checked {\n    .xplor-inline-switch__track {\n      background-color: var(--switch-color);\n    }\n\n    .xplor-inline-switch__thumb {\n      transform: translateX(1rem);\n    }\n  }\n\n  // Disabled state\n  &--disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n\n    .xplor-inline-switch__track {\n      background-color: rgba(0, 0, 0, 0.12);\n    }\n\n    .xplor-inline-switch__label {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    // Keep color when disabled but checked\n    &.xplor-inline-switch--checked {\n      .xplor-inline-switch__track {\n        background-color: var(--switch-color);\n        opacity: 0.5;\n      }\n\n      .xplor-inline-switch__thumb {\n        background-color: white;\n      }\n    }\n  }\n\n  // Hover effect\n  &:not(&--disabled):hover {\n    .xplor-inline-switch__thumb {\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n    }\n  }\n\n  // Focus effect\n  &__input:focus + &__track {\n    outline: 2px solid var(--switch-color);\n    outline-offset: 2px;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-inline-switch',\n  styleUrl: 'xplor-inline-switch.scss',\n  scoped: true,\n})\nexport class XplorInlineSwitch {\n  /**\n   * Checked state\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Value (for use in forms)\n   */\n  @Prop() value: any;\n\n  /**\n   * Switch color (applies when checked)\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Label text\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<boolean>;\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.xplorChange.emit(this.checked);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-inline-switch': true,\n      'xplor-inline-switch--disabled': this.disabled,\n      'xplor-inline-switch--checked': this.checked,\n    };\n\n    return (\n      <Host>\n        <label class={containerClasses} style={{ '--switch-color': this.color }}>\n          <input\n            type=\"checkbox\"\n            class=\"xplor-inline-switch__input\"\n            checked={this.checked}\n            value={this.value}\n            disabled={this.disabled}\n            onChange={this.handleChange}\n          />\n          <span class=\"xplor-inline-switch__track\">\n            <span class=\"xplor-inline-switch__thumb\"></span>\n          </span>\n          {this.label && <span class=\"xplor-inline-switch__label\">{this.label}</span>}\n          <slot />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,122 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputFileCss = "@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-file {\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-file {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-file {\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-file {\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-file {\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-file {\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-file, ul.sc-xplor-input-file {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-file li.sc-xplor-input-file, ul.sc-xplor-input-file li.sc-xplor-input-file {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-file {\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-file {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-file {\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-file {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-file .mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\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-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\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-file {\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-file: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-file {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-file-h {\n  display: block;\n}\n\n.xplor-input-file.sc-xplor-input-file {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-file__label.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-file__field.sc-xplor-input-file {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-file__field.sc-xplor-input-file:hover:not(.xplor-input-file--disabled .xplor-input-file__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-file__field.sc-xplor-input-file:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__field.sc-xplor-input-file {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__placeholder.sc-xplor-input-file, .xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__icon.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__icon.sc-xplor-input-file {\n  font-size: 1.25rem;\n  color: rgba(0, 0, 0, 0.54);\n  flex-shrink: 0;\n}\n.xplor-input-file__content.sc-xplor-input-file {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-file__placeholder.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__chips.sc-xplor-input-file {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n}\n.xplor-input-file__chip.sc-xplor-input-file {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.75rem;\n  background-color: #673AB7;\n  color: white;\n  border-radius: 1rem;\n  font-size: 0.875rem;\n  max-width: 100%;\n}\n.xplor-input-file__chip-text.sc-xplor-input-file {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-file__chip-size.sc-xplor-input-file {\n  font-size: 0.75rem;\n  opacity: 0.8;\n  white-space: nowrap;\n}\n.xplor-input-file__additional.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-left: 0.5rem;\n}\n.xplor-input-file__clear.sc-xplor-input-file {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-file__clear.sc-xplor-input-file:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-file__clear.sc-xplor-input-file:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-file__input.sc-xplor-input-file {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.xplor-input-file__input.sc-xplor-input-file:disabled {\n  cursor: not-allowed;\n}\n.xplor-input-file__counter.sc-xplor-input-file {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  padding: 0 1rem;\n}";
+
+const XplorInputFile$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputFile extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.attach = createEvent(this, "attach");
+        this.xplorClear = createEvent(this, "xplorClear");
+        /**
+         * Input label
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Choose file(s)';
+        /**
+         * Border/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether multiple files can be selected
+         */
+        this.multiple = false;
+        /**
+         * Accepted file types
+         */
+        this.accept = '';
+        /**
+         * Maximum number of chips to show
+         */
+        this.maxChips = 1;
+        /**
+         * Whether to show file counter
+         */
+        this.counter = true;
+        /**
+         * Whether to show file size
+         */
+        this.showSize = 1000;
+        /**
+         * Prepend inner icon (default: paperclip)
+         */
+        this.prependInnerIcon = '📎';
+        /**
+         * Files selected
+         */
+        this.selectedFiles = [];
+        this.handleFileChange = (event) => {
+            const target = event.target;
+            if (target.files) {
+                this.selectedFiles = Array.from(target.files);
+                this.attach.emit(this.selectedFiles);
+            }
+        };
+        this.handleClear = () => {
+            this.selectedFiles = [];
+            if (this.fileInputRef) {
+                this.fileInputRef.value = '';
+            }
+            this.xplorClear.emit();
+        };
+        this.formatFileSize = (bytes) => {
+            if (bytes === 0)
+                return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-file': true,
+            'xplor-input-file--disabled': this.disabled,
+        };
+        const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
+        const additionalCount = this.selectedFiles.length - this.maxChips;
+        return (h(Host, { key: '40fb5f31ec8451dc63096f535164de6f6eb11014' }, h("div", { key: 'b52686901e2d3bbd56cfb0ee3088bfbf5f8ec365', class: containerClasses }, this.label && (h("label", { key: 'f73832f4c1a8f41690db70e301474d56c6c969b7', class: "xplor-input-file__label" }, this.label)), h("div", { key: '46512b939981a4b4f07ad87f5f9c82c9acb0e7a2', class: "xplor-input-file__field" }, h("span", { key: 'd30c938dff0d36ab2973ce69c29388ed6391317d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '9d6bb0b0e5ec09e81f9ee57360d84f2239bf5270', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'a1300d4dce7eed67552774efeb8edc8ce1a41dd7', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '41285fdb00cc6e52466b665d5c1fd5bbb4fc54e1', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: 'e11fcc8dab8fb8d73fda9f6b82f2187e65ba61c2', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+    }
+    static get style() { return xplorInputFileCss; }
+}, [2, "xplor-input-file", {
+        "label": [1],
+        "placeholder": [1],
+        "color": [1],
+        "disabled": [4],
+        "multiple": [4],
+        "accept": [1],
+        "maxChips": [2, "max-chips"],
+        "counter": [4],
+        "showSize": [2, "show-size"],
+        "prependInnerIcon": [1, "prepend-inner-icon"],
+        "selectedFiles": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-file"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-file":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputFile$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInputFile = XplorInputFile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputFile, defineCustomElement };
+//# sourceMappingURL=xplor-input-file.js.map
+
+//# sourceMappingURL=xplor-input-file.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-input-file.js","mappings":"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","names":["XplorInputFile","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-file/xplor-input-file.scss?tag=xplor-input-file&encapsulation=scoped","src/components/xplor-input-file/xplor-input-file.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-file {\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  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    padding: 0.875rem 1rem;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    background-color: white;\n    cursor: pointer;\n    transition: border-color 0.2s ease;\n    gap: 0.75rem;\n\n    &:hover:not(.xplor-input-file--disabled &) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n\n    &:focus-within {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n  }\n\n  &--disabled {\n    .xplor-input-file__field {\n      background-color: rgba(0, 0, 0, 0.04);\n      cursor: not-allowed;\n    }\n\n    .xplor-input-file__placeholder,\n    .xplor-input-file__icon {\n      color: rgba(0, 0, 0, 0.38);\n    }\n  }\n\n  &__icon {\n    font-size: 1.25rem;\n    color: rgba(0, 0, 0, 0.54);\n    flex-shrink: 0;\n  }\n\n  &__content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  &__placeholder {\n    color: rgba(0, 0, 0, 0.38);\n  }\n\n  &__chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    align-items: center;\n  }\n\n  &__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.25rem 0.75rem;\n    background-color: #673AB7;\n    color: white;\n    border-radius: 1rem;\n    font-size: 0.875rem;\n    max-width: 100%;\n  }\n\n  &__chip-text {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__chip-size {\n    font-size: 0.75rem;\n    opacity: 0.8;\n    white-space: nowrap;\n  }\n\n  &__additional {\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-left: 0.5rem;\n  }\n\n  &__clear {\n    position: relative;\n    width: 1.5rem;\n    height: 1.5rem;\n    border: none;\n    background: transparent;\n    color: rgba(0, 0, 0, 0.54);\n    cursor: pointer;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s ease;\n    flex-shrink: 0;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n\n    &:active {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n  }\n\n  &__input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    cursor: pointer;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__counter {\n    font-size: 0.75rem;\n    color: rgba(0, 0, 0, 0.6);\n    padding: 0 1rem;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-file',\n  styleUrl: 'xplor-input-file.scss',\n  scoped: true,\n})\nexport class XplorInputFile {\n  private fileInputRef: HTMLInputElement;\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Choose file(s)';\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 multiple files can be selected\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Accepted file types\n   */\n  @Prop() accept: string = '';\n\n  /**\n   * Maximum number of chips to show\n   */\n  @Prop() maxChips: number = 1;\n\n  /**\n   * Whether to show file counter\n   */\n  @Prop() counter: boolean = true;\n\n  /**\n   * Whether to show file size\n   */\n  @Prop() showSize: number = 1000;\n\n  /**\n   * Prepend inner icon (default: paperclip)\n   */\n  @Prop() prependInnerIcon: string = '📎';\n\n  /**\n   * Files selected\n   */\n  @State() selectedFiles: File[] = [];\n\n  /**\n   * Attach/change event\n   */\n  @Event() attach: EventEmitter<File[]>;\n\n  /**\n   * Clear event\n   */\n  @Event() xplorClear: EventEmitter<void>;\n\n  private handleFileChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    if (target.files) {\n      this.selectedFiles = Array.from(target.files);\n      this.attach.emit(this.selectedFiles);\n    }\n  };\n\n  private handleClear = () => {\n    this.selectedFiles = [];\n    if (this.fileInputRef) {\n      this.fileInputRef.value = '';\n    }\n    this.xplorClear.emit();\n  };\n\n  private formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-file': true,\n      'xplor-input-file--disabled': this.disabled,\n    };\n\n    const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n    const additionalCount = this.selectedFiles.length - this.maxChips;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-file__label\">{this.label}</label>\n          )}\n\n          <div class=\"xplor-input-file__field\">\n            <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n            <div class=\"xplor-input-file__content\">\n              {this.selectedFiles.length === 0 ? (\n                <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n              ) : (\n                <div class=\"xplor-input-file__chips\">\n                  {visibleFiles.map((file) => (\n                    <div class=\"xplor-input-file__chip\" key={file.name}>\n                      <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n                      {this.showSize && file.size && (\n                        <span class=\"xplor-input-file__chip-size\">\n                          ({this.formatFileSize(file.size)})\n                        </span>\n                      )}\n                    </div>\n                  ))}\n                  {additionalCount > 0 && (\n                    <span class=\"xplor-input-file__additional\">\n                      +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n                    </span>\n                  )}\n                </div>\n              )}\n            </div>\n\n            {this.selectedFiles.length > 0 && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"xplor-input-file__clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                ✕\n              </button>\n            )}\n\n            <input\n              ref={(el) => (this.fileInputRef = el)}\n              type=\"file\"\n              class=\"xplor-input-file__input\"\n              multiple={this.multiple}\n              accept={this.accept}\n              disabled={this.disabled}\n              onChange={this.handleFileChange}\n            />\n          </div>\n\n          {this.counter && this.selectedFiles.length > 0 && (\n            <div class=\"xplor-input-file__counter\">\n              {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,90 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorInputSearchCss = "@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-search {\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-search {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-search {\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-search {\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-search {\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-search {\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-search, ul.sc-xplor-input-search {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-search li.sc-xplor-input-search, ul.sc-xplor-input-search li.sc-xplor-input-search {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-search {\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-search {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-search {\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-search {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-search .mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\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-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\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-search {\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-search: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-search {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-search-h {\n  display: block;\n}\n\n.xplor-input-search.sc-xplor-input-search {\n  display: flex;\n  flex-direction: column;\n}\n.xplor-input-search__field.sc-xplor-input-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  transition: border-color 0.2s ease;\n  padding-right: 0.375rem;\n}\n.xplor-input-search__field.sc-xplor-input-search:hover:not(.xplor-input-search--disabled .xplor-input-search__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  border-color: #008480;\n  border-width: 2px;\n  padding-right: calc(0.375rem - 1px);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding-left: calc(1rem - 1px);\n}\n.xplor-input-search__input.sc-xplor-input-search {\n  flex: 1;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  outline: none;\n  background: transparent;\n  min-width: 0;\n}\n.xplor-input-search__input.sc-xplor-input-search::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-search__input.sc-xplor-input-search:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-search__button.sc-xplor-input-search {\n  min-height: 0;\n  min-width: 0;\n  height: 2.5rem;\n  width: 2.5rem;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background-color: #008480;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-search__button.sc-xplor-input-search:hover:not(:disabled) {\n  background-color: #006D6A;\n}\n.xplor-input-search__button.sc-xplor-input-search:active:not(:disabled) {\n  background-color: #005755;\n}\n.xplor-input-search__button.sc-xplor-input-search:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n.xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: currentColor;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 0.625rem 1rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2rem;\n  width: 2rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1rem;\n  height: 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 1rem 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2.75rem;\n  width: 2.75rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.375rem;\n  height: 1.375rem;\n}\n.xplor-input-search--disabled.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  background-color: rgba(0, 0, 0, 0.04);\n}";
+
+const XplorInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSearch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.search = createEvent(this, "search");
+        /**
+         * Search value
+         */
+        this.value = '';
+        /**
+         * Input placeholder
+         */
+        this.placeholder = 'Search...';
+        /**
+         * Background color
+         */
+        this.bgColor = 'white';
+        /**
+         * Button/focus color
+         */
+        this.color = '#008480';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Density (compact, default, comfortable)
+         */
+        this.density = 'default';
+        this.isFocused = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+        };
+        this.handleSearch = () => {
+            this.search.emit(this.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.handleSearch();
+            }
+        };
+    }
+    render() {
+        const containerClasses = {
+            'xplor-input-search': true,
+            [`xplor-input-search--${this.density}`]: true,
+            'xplor-input-search--focused': this.isFocused,
+            'xplor-input-search--disabled': this.disabled,
+        };
+        return (h(Host, { key: 'c608c1ad9c73dc708aaf5d985b0e376ad7923b59' }, h("div", { key: '8efabc2eea7bf741658a8d01f4b6ed14b259de82', class: containerClasses }, h("div", { key: '82384b7cf2967ca26e8d3b1358a5c9266fa09f20', class: "xplor-input-search__field" }, h("input", { key: '57a6c1dc9fff69f25bd75ad78e9c092e593cbee1', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+                backgroundColor: this.bgColor,
+            } }), h("slot", { key: '8656098e81af32b857589443a89f009791429d2d', name: "append-inner" }, h("button", { key: 'ca36754aec41e189e4b870103fe82efb8667d895', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: '3e5f9f080c757f46e17641c549bfda7eeb0d9b30', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: 'c5814684ea375fe19074f47234cc11f919a4db5c', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+    }
+    static get style() { return xplorInputSearchCss; }
+}, [6, "xplor-input-search", {
+        "value": [1025],
+        "placeholder": [1],
+        "bgColor": [1, "bg-color"],
+        "color": [1],
+        "disabled": [4],
+        "density": [1],
+        "isFocused": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-input-search"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-input-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorInputSearch$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorInputSearch = XplorInputSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorInputSearch, defineCustomElement };
+//# sourceMappingURL=xplor-input-search.js.map
+
+//# sourceMappingURL=xplor-input-search.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-input-search.js","mappings":"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","names":["XplorInputSearch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-search/xplor-input-search.scss?tag=xplor-input-search&encapsulation=scoped","src/components/xplor-input-search/xplor-input-search.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-search {\n  display: flex;\n  flex-direction: column;\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    background-color: white;\n    transition: border-color 0.2s ease;\n    padding-right: 0.375rem;\n\n    &:hover:not(.xplor-input-search--disabled &) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n  }\n\n  &--focused {\n    .xplor-input-search__field {\n      border-color: #008480;\n      border-width: 2px;\n      padding-right: calc(0.375rem - 1px);\n    }\n\n    .xplor-input-search__input {\n      padding-left: calc(1rem - 1px);\n    }\n  }\n\n  &__input {\n    flex: 1;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: none;\n    outline: none;\n    background: transparent;\n    min-width: 0;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:disabled {\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n    }\n  }\n\n  &__button {\n    min-height: 0;\n    min-width: 0;\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: 0;\n    border: none;\n    border-radius: 4px;\n    background-color: #008480;\n    color: white;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s ease;\n    flex-shrink: 0;\n\n    &:hover:not(:disabled) {\n      background-color: #006D6A;\n    }\n\n    &:active:not(:disabled) {\n      background-color: #005755;\n    }\n\n    &:disabled {\n      opacity: 0.38;\n      cursor: not-allowed;\n    }\n  }\n\n  &__icon {\n    width: 1.25rem;\n    height: 1.25rem;\n    fill: currentColor;\n  }\n\n  // Density variants\n  &--compact {\n    .xplor-input-search__input {\n      padding: 0.625rem 1rem;\n    }\n\n    .xplor-input-search__button {\n      height: 2rem;\n      width: 2rem;\n    }\n\n    .xplor-input-search__icon {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  &--comfortable {\n    .xplor-input-search__input {\n      padding: 1rem 1rem;\n    }\n\n    .xplor-input-search__button {\n      height: 2.75rem;\n      width: 2.75rem;\n    }\n\n    .xplor-input-search__icon {\n      width: 1.375rem;\n      height: 1.375rem;\n    }\n  }\n\n  &--disabled {\n    .xplor-input-search__field {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-search',\n  styleUrl: 'xplor-input-search.scss',\n  scoped: true,\n})\nexport class XplorInputSearch {\n  /**\n   * Search value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Search...';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Button/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   * Density (compact, default, comfortable)\n   */\n  @Prop() density: 'compact' | 'default' | 'comfortable' = 'default';\n\n  /**\n   * Search event (triggered on button click or Enter key)\n   */\n  @Event() search: EventEmitter<string>;\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  };\n\n  private handleSearch = () => {\n    this.search.emit(this.value);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      this.handleSearch();\n    }\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-search': true,\n      [`xplor-input-search--${this.density}`]: true,\n      'xplor-input-search--focused': this.isFocused,\n      'xplor-input-search--disabled': this.disabled,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"xplor-input-search__field\">\n            <input\n              type=\"text\"\n              class=\"xplor-input-search__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              onInput={this.handleInput}\n              onKeyDown={this.handleKeyDown}\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n            />\n\n            <slot name=\"append-inner\">\n              <button\n                type=\"button\"\n                class=\"xplor-input-search__button\"\n                onClick={this.handleSearch}\n                disabled={this.disabled}\n                data-testid=\"input-search-button\"\n              >\n                <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n                  <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n                </svg>\n              </button>\n            </slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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