@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1 @@
+{"file":"xplor-btn-icon.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wjUAAwjU;;MCOnkUA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAiD,WAAW;AAEzE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAoB,IAAI;AAEpC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAoB,IAAI;AAExC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,UAAU;AAExE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE/B,SAAC;AA8BF;IA5BC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,mBAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,mBAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC1C;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,IAAI;YAC1E,aAAa,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,QAAQ;SACxF;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnIcon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-icon/xplor-btn-icon.scss?tag=xplor-btn-icon&encapsulation=scoped","src/components/xplor-btn-icon/xplor-btn-icon.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-icon {\n  min-width: 0;\n  min-height: 0;\n  width: var(--btn-size, 32px);\n  height: var(--btn-size, 32px);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  position: relative;\n\n  &__content {\n    font-size: var(--icon-size, 18px);\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  // Elevated variant (default)\n  &--elevated {\n    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),\n                0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n  }\n\n  // Text variant\n  &--text {\n    box-shadow: none;\n  }\n\n  // Outlined variant\n  &--outlined {\n    border: 1px solid currentColor;\n    box-shadow: none;\n  }\n\n  // Tonal variant\n  &--tonal {\n    box-shadow: none;\n  }\n\n  // Color variants\n  &--primary {\n    &.xplor-btn-icon--elevated,\n    &.xplor-btn-icon--text {\n      background-color: #EC7702;\n      color: white;\n    }\n\n    &.xplor-btn-icon--outlined {\n      background-color: transparent;\n      color: #EC7702;\n      border-color: #EC7702;\n    }\n\n    &.xplor-btn-icon--tonal {\n      background-color: #FFF3E6;\n      color: #EC7702;\n    }\n\n    &:hover:not(.xplor-btn-icon--disabled) {\n      &.xplor-btn-icon--elevated,\n      &.xplor-btn-icon--text {\n        background-color: #D66A02;\n      }\n\n      &.xplor-btn-icon--tonal {\n        background-color: #FFE7CC;\n      }\n    }\n  }\n\n  &--secondary {\n    &.xplor-btn-icon--elevated,\n    &.xplor-btn-icon--text {\n      background-color: #008480;\n      color: white;\n    }\n\n    &.xplor-btn-icon--outlined {\n      background-color: transparent;\n      color: #008480;\n      border-color: #008480;\n    }\n\n    &.xplor-btn-icon--tonal {\n      background-color: #E6F7F7;\n      color: #008480;\n    }\n\n    &:hover:not(.xplor-btn-icon--disabled) {\n      &.xplor-btn-icon--elevated,\n      &.xplor-btn-icon--text {\n        background-color: #006D6A;\n      }\n\n      &.xplor-btn-icon--tonal {\n        background-color: #008480;\n        color: white;\n      }\n    }\n  }\n\n  &--success {\n    &.xplor-btn-icon--elevated,\n    &.xplor-btn-icon--text {\n      background-color: #489951;\n      color: white;\n    }\n\n    &.xplor-btn-icon--outlined {\n      background-color: transparent;\n      color: #489951;\n      border-color: #489951;\n    }\n\n    &.xplor-btn-icon--tonal {\n      background-color: #E8F5E9;\n      color: #489951;\n    }\n\n    &:hover:not(.xplor-btn-icon--disabled) {\n      &.xplor-btn-icon--elevated,\n      &.xplor-btn-icon--text {\n        background-color: #3D8044;\n      }\n\n      &.xplor-btn-icon--tonal {\n        background-color: #D0EBD2;\n      }\n    }\n  }\n\n  &--disabled {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-icon',\n  styleUrl: 'xplor-btn-icon.scss',\n  scoped: true,\n})\nexport class XplorBtnIcon {\n  /**\n   * Button color variant\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | string = 'secondary';\n\n  /**\n   * Button size (can be pixel value like '32' or '48')\n   */\n  @Prop() size: string | number = '32';\n\n  /**\n   * Icon size\n   */\n  @Prop() iconSize: string | number = '18';\n\n  /**\n   * Visual variant\n   */\n  @Prop() variant: 'text' | 'outlined' | 'elevated' | 'tonal' = 'elevated';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Click event\n   */\n  @Event() xplorClick: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled) {\n      this.xplorClick.emit(event);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'xplor-btn-icon': true,\n      [`xplor-btn-icon--${this.color}`]: true,\n      [`xplor-btn-icon--${this.variant}`]: true,\n      'xplor-btn-icon--disabled': this.disabled,\n    };\n\n    const buttonStyles = {\n      '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,\n      '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,\n    };\n\n    return (\n      <Host>\n        <button\n          class={buttonClasses}\n          style={buttonStyles}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n        >\n          <span class=\"xplor-btn-icon__content\">\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,106 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnMenuCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-menu {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-btn-menu {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-menu {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-btn-menu {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-menu {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-btn-menu {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-btn-menu, ul.sc-xplor-btn-menu {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-menu li.sc-xplor-btn-menu, ul.sc-xplor-btn-menu li.sc-xplor-btn-menu {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-menu, ul.mdc-list.sc-xplor-btn-menu {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-menu li.mdc-list-item.sc-xplor-btn-menu, ul.mdc-list.sc-xplor-btn-menu li.mdc-list-item.sc-xplor-btn-menu {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-menu {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-menu {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-menu {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-menu {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-menu .mdc-text-field--outlined.sc-xplor-btn-menu .mdc-notched-outline__notch.sc-xplor-btn-menu {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-menu .mdc-notched-outline__notch.sc-xplor-btn-menu {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-menu .mdc-notched-outline.sc-xplor-btn-menu .mdc-notched-outline__notch.sc-xplor-btn-menu {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-menu {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-menu:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-menu {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-menu-h {\n  display: inline-block;\n  position: relative;\n}\n\n.xplor-btn-menu.sc-xplor-btn-menu {\n  position: relative;\n  display: inline-block;\n}\n.xplor-btn-menu__button.sc-xplor-btn-menu {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid #008480;\n  border-radius: 4px;\n  background-color: transparent;\n  color: #008480;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: background-color 0.2s ease;\n}\n.xplor-btn-menu__button.sc-xplor-btn-menu:hover {\n  background-color: rgba(0, 132, 128, 0.04);\n}\n.xplor-btn-menu__icon.sc-xplor-btn-menu {\n  font-size: 0.75rem;\n  line-height: 1;\n}\n.xplor-btn-menu__list.sc-xplor-btn-menu {\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  left: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: 4px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n  overflow: hidden;\n}\n.xplor-btn-menu__item.sc-xplor-btn-menu {\n  padding: 0.75rem 1rem;\n  border-bottom: 1px solid #e0e0e0;\n  text-align: center;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.xplor-btn-menu__item.sc-xplor-btn-menu:hover:not(.xplor-btn-menu__item--disabled) {\n  background-color: #f5f5f5;\n}\n.xplor-btn-menu__item.sc-xplor-btn-menu:last-child {\n  border-bottom: none;\n}\n.xplor-btn-menu__item--disabled.sc-xplor-btn-menu {\n  opacity: 0.38;\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+
+const XplorBtnMenu$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClick = createEvent(this, "xplorClick");
+        /**
+         * Button label
+         */
+        this.label = '';
+        /**
+         * Menu options
+         */
+        this.options = [];
+        /**
+         * Hidden option keys
+         */
+        this.hiddenKeys = [];
+        /**
+         * Disabled option keys
+         */
+        this.disabledKeys = [];
+        /**
+         * Button color
+         */
+        this.color = 'secondary';
+        /**
+         * Button density (compact, default, comfortable)
+         */
+        this.density = 'default';
+        /**
+         * Whether the menu is open
+         */
+        this.show = false;
+        this.handleOutsideClick = (event) => {
+            if (this.menuRef && !this.menuRef.contains(event.target)) {
+                this.show = false;
+            }
+        };
+        this.toggleMenu = () => {
+            this.show = !this.show;
+        };
+        this.handleClickOption = (option) => {
+            this.xplorClick.emit(option);
+            this.show = false;
+        };
+        this.isHidden = (key) => {
+            return key !== null && this.hiddenKeys.includes(key);
+        };
+        this.isDisabled = (key) => {
+            return key !== null && this.disabledKeys.includes(key);
+        };
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    render() {
+        return (h(Host, { key: '3e9516c7c2b31794bf8d71eb5672e46d3210dbc8' }, h("div", { key: 'e030d7ab1b7eee7fc8de9a6a519c69c285d01529', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, h("slot", { key: '185cb5433a18d51ea7e2f9b9309f7570050fdcea', name: "activator" }, h("button", { key: 'de5afd1f3e58b56301ea75724f0f1a5e04697f39', class: "xplor-btn-menu__button", onClick: this.toggleMenu }, h("span", { key: '73eaed41e0a754d06753f0fa30ef32864f2841f8' }, this.label), h("span", { key: '63bc890fe97154d02eb4da50e689f1db5226870f', class: "xplor-btn-menu__icon" }, "\u25BC"))), this.show && (h("div", { key: '6f231d7e1feac5dca59c9ef03d45dcfeffcedcbf', class: "xplor-btn-menu__list" }, this.options.map((option, index) => {
+            const key = option.key || String(index);
+            if (this.isHidden(key)) {
+                return null;
+            }
+            return (h("div", { key: key, class: {
+                    'xplor-btn-menu__item': true,
+                    'xplor-btn-menu__item--disabled': this.isDisabled(key),
+                }, onClick: () => !this.isDisabled(key) && this.handleClickOption(option) }, h("slot", { name: key }, option.label || '')));
+        }))))));
+    }
+    static get style() { return xplorBtnMenuCss; }
+}, [6, "xplor-btn-menu", {
+        "label": [1],
+        "options": [16],
+        "hiddenKeys": [16, "hidden-keys"],
+        "disabledKeys": [16, "disabled-keys"],
+        "color": [1],
+        "density": [1],
+        "show": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnMenu$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnMenu = XplorBtnMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnMenu, defineCustomElement };
+//# sourceMappingURL=xplor-btn-menu.js.map
+
+//# sourceMappingURL=xplor-btn-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-btn-menu.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kgQAAkgQ;;MCa7gQA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAiB,EAAE;AAElC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAa,EAAE;AAEjC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAa,EAAE;AAEnC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,SAAS;AAEnC;;AAEG;AACM,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAiBtB,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;AACjD,YAAA,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AAChE,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAErB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACxB,SAAC;AAEO,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,MAAkB,KAAI;AACjD,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACnB,SAAC;AAEO,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAAkB,KAAa;AACjD,YAAA,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC;AACtD,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,GAAkB,KAAa;AACnD,YAAA,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;AACxD,SAAC;AA2CF;IAxEC,gBAAgB,GAAA;QACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC;;IAG7D,oBAAoB,GAAA;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC;;IA0BhE,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAA,EAC1D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EACpB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU,EAAA,EAExB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAQ,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,EAAA,QAAA,CAAS,CACpC,CACJ,EAEN,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,sBAAsB,EAC9B,EAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;YAClC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC;AACvC,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACtB,gBAAA,OAAO,IAAI;;YAGb,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;AACL,oBAAA,sBAAsB,EAAE,IAAI;AAC5B,oBAAA,gCAAgC,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;AACvD,iBAAA,EACD,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAA,EAEtE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAE,GAAG,EAAA,EAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAQ,CACxC;AAEV,SAAC,CAAC,CACE,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-menu/xplor-btn-menu.scss?tag=xplor-btn-menu&encapsulation=scoped","src/components/xplor-btn-menu/xplor-btn-menu.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.xplor-btn-menu {\n  position: relative;\n  display: inline-block;\n\n  &__button {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.625rem;\n    padding: 0.5rem 1rem;\n    border: 1px solid #008480;\n    border-radius: 4px;\n    background-color: transparent;\n    color: #008480;\n    cursor: pointer;\n    font-size: inherit;\n    font-family: inherit;\n    transition: background-color 0.2s ease;\n\n    &:hover {\n      background-color: rgba(0, 132, 128, 0.04);\n    }\n  }\n\n  &__icon {\n    font-size: 0.75rem;\n    line-height: 1;\n  }\n\n  &__list {\n    position: absolute;\n    top: calc(100% + 0.25rem);\n    left: 0;\n    min-width: 200px;\n    background: white;\n    border-radius: 4px;\n    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n                0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n                0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n    z-index: 1000;\n    overflow: hidden;\n  }\n\n  &__item {\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #e0e0e0;\n    text-align: center;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n\n    &:hover:not(&--disabled) {\n      background-color: #f5f5f5;\n    }\n\n    &:last-child {\n      border-bottom: none;\n    }\n\n    &--disabled {\n      opacity: 0.38;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nexport interface MenuOption {\n  key?: string;\n  label: string;\n  [key: string]: any;\n}\n\n@Component({\n  tag: 'xplor-btn-menu',\n  styleUrl: 'xplor-btn-menu.scss',\n  scoped: true,\n})\nexport class XplorBtnMenu {\n  /**\n   * Button label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Menu options\n   */\n  @Prop() options: MenuOption[] = [];\n\n  /**\n   * Hidden option keys\n   */\n  @Prop() hiddenKeys: string[] = [];\n\n  /**\n   * Disabled option keys\n   */\n  @Prop() disabledKeys: string[] = [];\n\n  /**\n   * Button color\n   */\n  @Prop() color: string = 'secondary';\n\n  /**\n   * Button density (compact, default, comfortable)\n   */\n  @Prop() density: string = 'default';\n\n  /**\n   * Whether the menu is open\n   */\n  @State() show: boolean = false;\n\n  /**\n   * Click event - emits the clicked option\n   */\n  @Event() xplorClick: EventEmitter<MenuOption>;\n\n  private menuRef: HTMLDivElement;\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n  }\n\n  private handleOutsideClick = (event: MouseEvent) => {\n    if (this.menuRef && !this.menuRef.contains(event.target as Node)) {\n      this.show = false;\n    }\n  };\n\n  private toggleMenu = () => {\n    this.show = !this.show;\n  };\n\n  private handleClickOption = (option: MenuOption) => {\n    this.xplorClick.emit(option);\n    this.show = false;\n  };\n\n  private isHidden = (key: string | null): boolean => {\n    return key !== null && this.hiddenKeys.includes(key);\n  };\n\n  private isDisabled = (key: string | null): boolean => {\n    return key !== null && this.disabledKeys.includes(key);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"xplor-btn-menu\" ref={(el) => (this.menuRef = el)}>\n          <slot name=\"activator\">\n            <button\n              class=\"xplor-btn-menu__button\"\n              onClick={this.toggleMenu}\n            >\n              <span>{this.label}</span>\n              <span class=\"xplor-btn-menu__icon\">▼</span>\n            </button>\n          </slot>\n\n          {this.show && (\n            <div class=\"xplor-btn-menu__list\">\n              {this.options.map((option, index) => {\n                const key = option.key || String(index);\n                if (this.isHidden(key)) {\n                  return null;\n                }\n\n                return (\n                  <div\n                    key={key}\n                    class={{\n                      'xplor-btn-menu__item': true,\n                      'xplor-btn-menu__item--disabled': this.isDisabled(key),\n                    }}\n                    onClick={() => !this.isDisabled(key) && this.handleClickOption(option)}\n                  >\n                    <slot name={key}>{option.label || ''}</slot>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-btn-toggle-group.d.ts

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

package/dist/components/xplor-btn-toggle-group.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorBtnToggleGroupCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-toggle-group {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-btn-toggle-group {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-toggle-group {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-btn-toggle-group {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-toggle-group {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-btn-toggle-group {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-btn-toggle-group, ul.sc-xplor-btn-toggle-group {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-toggle-group li.sc-xplor-btn-toggle-group, ul.sc-xplor-btn-toggle-group li.sc-xplor-btn-toggle-group {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-toggle-group, ul.mdc-list.sc-xplor-btn-toggle-group {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-toggle-group li.mdc-list-item.sc-xplor-btn-toggle-group, ul.mdc-list.sc-xplor-btn-toggle-group li.mdc-list-item.sc-xplor-btn-toggle-group {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-toggle-group {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-toggle-group {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-toggle-group {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-toggle-group {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-toggle-group .mdc-text-field--outlined.sc-xplor-btn-toggle-group .mdc-notched-outline__notch.sc-xplor-btn-toggle-group {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-toggle-group .mdc-notched-outline__notch.sc-xplor-btn-toggle-group {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-toggle-group .mdc-notched-outline.sc-xplor-btn-toggle-group .mdc-notched-outline__notch.sc-xplor-btn-toggle-group {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-toggle-group {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-toggle-group:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-toggle-group {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-toggle-group-h {\n  display: inline-block;\n}\n\n.xplor-btn-toggle-group.sc-xplor-btn-toggle-group {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  height: auto;\n}";
+
+const XplorBtnToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnToggleGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Whether multiple buttons can be active at once
+         */
+        this.multiple = false;
+        /**
+         * Density variant
+         */
+        this.density = 'default';
+    }
+    render() {
+        return (h(Host, { key: '587016261064869ff2b10cf04371963f57642221' }, h("div", { key: 'ee8813207ade2261011e699ce12010135a6d640b', class: "xplor-btn-toggle-group", role: "group" }, h("slot", { key: '3b4d82938d310ac8864a02425d97b822ba4b1d9d' }))));
+    }
+    static get style() { return xplorBtnToggleGroupCss; }
+}, [6, "xplor-btn-toggle-group", {
+        "multiple": [4],
+        "density": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-toggle-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-toggle-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnToggleGroup$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnToggleGroup = XplorBtnToggleGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnToggleGroup, defineCustomElement };
+//# sourceMappingURL=xplor-btn-toggle-group.js.map
+
+//# sourceMappingURL=xplor-btn-toggle-group.js.map

package/dist/components/xplor-btn-toggle-group.js.map

@@ -0,0 +1 @@
+{"file":"xplor-btn-toggle-group.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,y6NAAy6N;;MCO37NA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAME;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA0C,SAAS;AAWnE;IATC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnToggleGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-toggle-group/xplor-btn-toggle-group.scss?tag=xplor-btn-toggle-group&encapsulation=scoped","src/components/xplor-btn-toggle-group/xplor-btn-toggle-group.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-toggle-group {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  height: auto;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-toggle-group',\n  styleUrl: 'xplor-btn-toggle-group.scss',\n  scoped: true,\n})\nexport class XplorBtnToggleGroup {\n  /**\n   * Whether multiple buttons can be active at once\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Density variant\n   */\n  @Prop() density: 'compact' | 'default' | 'comfortable' = 'default';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"xplor-btn-toggle-group\" role=\"group\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-btn-toggle-secondary.d.ts

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

package/dist/components/xplor-btn-toggle-secondary.js

@@ -0,0 +1,65 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnToggleSecondaryCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-toggle-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-btn-toggle-secondary {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-toggle-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-btn-toggle-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-btn-toggle-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-btn-toggle-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-btn-toggle-secondary, ul.sc-xplor-btn-toggle-secondary {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-toggle-secondary li.sc-xplor-btn-toggle-secondary, ul.sc-xplor-btn-toggle-secondary li.sc-xplor-btn-toggle-secondary {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-toggle-secondary, ul.mdc-list.sc-xplor-btn-toggle-secondary {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-toggle-secondary li.mdc-list-item.sc-xplor-btn-toggle-secondary, ul.mdc-list.sc-xplor-btn-toggle-secondary li.mdc-list-item.sc-xplor-btn-toggle-secondary {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-toggle-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-btn-toggle-secondary {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-toggle-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-btn-toggle-secondary {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-toggle-secondary .mdc-text-field--outlined.sc-xplor-btn-toggle-secondary .mdc-notched-outline__notch.sc-xplor-btn-toggle-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-btn-toggle-secondary .mdc-notched-outline__notch.sc-xplor-btn-toggle-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-toggle-secondary .mdc-notched-outline.sc-xplor-btn-toggle-secondary .mdc-notched-outline__notch.sc-xplor-btn-toggle-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-btn-toggle-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-btn-toggle-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-btn-toggle-secondary {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-toggle-secondary-h {\n  display: inline-block;\n}\n\n.xplor-btn-toggle-secondary.sc-xplor-btn-toggle-secondary {\n  border: 1px solid #E0E0E0;\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  border-radius: 1rem;\n  color: #757575;\n  min-width: 70px;\n  padding: 0.5rem 1rem;\n  background-color: white;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: all 0.2s ease;\n}\n.xplor-btn-toggle-secondary.sc-xplor-btn-toggle-secondary:first-of-type {\n  margin-left: 0;\n}\n.xplor-btn-toggle-secondary--active.sc-xplor-btn-toggle-secondary {\n  background-color: #E6F7F7;\n  color: #008480;\n  border-color: #008480;\n}\n.xplor-btn-toggle-secondary--disabled.sc-xplor-btn-toggle-secondary {\n  background-color: #FAFAFA;\n  color: rgba(0, 0, 0, 0.38);\n  border-color: rgba(0, 0, 0, 0.12);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.xplor-btn-toggle-secondary--disabled.xplor-btn-toggle-secondary--active.sc-xplor-btn-toggle-secondary {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.xplor-btn-toggle-secondary--inactive-outlined.sc-xplor-btn-toggle-secondary {\n  border-color: #757575;\n}\n.xplor-btn-toggle-secondary.sc-xplor-btn-toggle-secondary:hover:not(.xplor-btn-toggle-secondary--disabled) {\n  background-color: #F5F5F5;\n}\n.xplor-btn-toggle-secondary.sc-xplor-btn-toggle-secondary:hover:not(.xplor-btn-toggle-secondary--disabled).xplor-btn-toggle-secondary--active {\n  background-color: #D0EBD2;\n}";
+
+const XplorBtnToggleSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnToggleSecondary extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorToggle = createEvent(this, "xplorToggle");
+        /**
+         * Whether the button is active/selected
+         */
+        this.active = false;
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether to show outline when inactive
+         */
+        this.inactiveOutlined = false;
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.active = !this.active;
+                this.xplorToggle.emit(this.active);
+            }
+        };
+    }
+    render() {
+        const buttonClasses = {
+            'xplor-btn-toggle-secondary': true,
+            'xplor-btn-toggle-secondary--active': this.active,
+            'xplor-btn-toggle-secondary--disabled': this.disabled,
+            'xplor-btn-toggle-secondary--inactive-outlined': this.inactiveOutlined && !this.active,
+        };
+        return (h(Host, { key: 'e82338d3bdbd2af08df290ee79359acb9e61dfae' }, h("button", { key: '137cf53e7b48676e86e3ed12a575e94792eab35c', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: 'bfacf098eb4692bc56faf88a4444b1c2213d3a3b' }))));
+    }
+    static get style() { return xplorBtnToggleSecondaryCss; }
+}, [6, "xplor-btn-toggle-secondary", {
+        "active": [1028],
+        "disabled": [4],
+        "inactiveOutlined": [4, "inactive-outlined"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-toggle-secondary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-toggle-secondary":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnToggleSecondary$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnToggleSecondary = XplorBtnToggleSecondary$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnToggleSecondary, defineCustomElement };
+//# sourceMappingURL=xplor-btn-toggle-secondary.js.map
+
+//# sourceMappingURL=xplor-btn-toggle-secondary.js.map

package/dist/components/xplor-btn-toggle-secondary.js.map

@@ -0,0 +1 @@
+{"file":"xplor-btn-toggle-secondary.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,i0QAAi0Q;;MCOv1QA,yBAAuB,iBAAAC,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;AALpC,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAOjC,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;gBAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEtC,SAAC;AAuBF;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,4BAA4B,EAAE,IAAI;YAClC,oCAAoC,EAAE,IAAI,CAAC,MAAM;YACjD,sCAAsC,EAAE,IAAI,CAAC,QAAQ;YACrD,+CAA+C,EAAE,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,MAAM;SACvF;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,cAAA,EACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,EAE5C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnToggleSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-toggle-secondary/xplor-btn-toggle-secondary.scss?tag=xplor-btn-toggle-secondary&encapsulation=scoped","src/components/xplor-btn-toggle-secondary/xplor-btn-toggle-secondary.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-toggle-secondary {\n  border: 1px solid #E0E0E0;\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n  margin-bottom: 0.5rem;\n  border-radius: 1rem;\n  color: #757575;\n  min-width: 70px;\n  padding: 0.5rem 1rem;\n  background-color: white;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: all 0.2s ease;\n\n  &:first-of-type {\n    margin-left: 0;\n  }\n\n  &--active {\n    background-color: #E6F7F7;\n    color: #008480;\n    border-color: #008480;\n  }\n\n  &--disabled {\n    background-color: #FAFAFA;\n    color: rgba(0, 0, 0, 0.38);\n    border-color: rgba(0, 0, 0, 0.12);\n    cursor: not-allowed;\n    pointer-events: none;\n\n    &.xplor-btn-toggle-secondary--active {\n      background-color: rgba(0, 0, 0, 0.05);\n    }\n  }\n\n  &--inactive-outlined {\n    border-color: #757575;\n  }\n\n  &:hover:not(.xplor-btn-toggle-secondary--disabled) {\n    background-color: #F5F5F5;\n\n    &.xplor-btn-toggle-secondary--active {\n      background-color: #D0EBD2;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-toggle-secondary',\n  styleUrl: 'xplor-btn-toggle-secondary.scss',\n  scoped: true,\n})\nexport class XplorBtnToggleSecondary {\n  /**\n   * Whether the button is active/selected\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show outline when inactive\n   */\n  @Prop() inactiveOutlined: boolean = false;\n\n  /**\n   * Toggle event\n   */\n  @Event() xplorToggle: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.active = !this.active;\n      this.xplorToggle.emit(this.active);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'xplor-btn-toggle-secondary': true,\n      'xplor-btn-toggle-secondary--active': this.active,\n      'xplor-btn-toggle-secondary--disabled': this.disabled,\n      'xplor-btn-toggle-secondary--inactive-outlined': this.inactiveOutlined && !this.active,\n    };\n\n    return (\n      <Host>\n        <button\n          class={buttonClasses}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          aria-pressed={this.active ? 'true' : 'false'}\n        >\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorBtnToggleCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-toggle {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-btn-toggle {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-toggle {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-btn-toggle {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-toggle {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-btn-toggle {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-btn-toggle, ul.sc-xplor-btn-toggle {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-toggle li.sc-xplor-btn-toggle, ul.sc-xplor-btn-toggle li.sc-xplor-btn-toggle {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-toggle, ul.mdc-list.sc-xplor-btn-toggle {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-toggle li.mdc-list-item.sc-xplor-btn-toggle, ul.mdc-list.sc-xplor-btn-toggle li.mdc-list-item.sc-xplor-btn-toggle {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-toggle {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-toggle {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-toggle {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-toggle {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-toggle .mdc-text-field--outlined.sc-xplor-btn-toggle .mdc-notched-outline__notch.sc-xplor-btn-toggle {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-toggle .mdc-notched-outline__notch.sc-xplor-btn-toggle {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-toggle .mdc-notched-outline.sc-xplor-btn-toggle .mdc-notched-outline__notch.sc-xplor-btn-toggle {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-toggle {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-toggle:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-toggle {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-toggle-h {\n  display: inline-block;\n}\n\n.xplor-btn-toggle.sc-xplor-btn-toggle {\n  border: 1px solid #E0E0E0;\n  border-radius: 1rem;\n  min-width: 4rem;\n  padding: 0.5rem 1rem;\n  background-color: white;\n  color: #757575;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  margin-right: 0.5rem;\n}\n.xplor-btn-toggle.sc-xplor-btn-toggle:first-of-type {\n  margin-left: 0;\n}\n.xplor-btn-toggle--active.sc-xplor-btn-toggle {\n  background-color: #E6F7F7;\n  color: #008480;\n  border-color: #008480;\n}\n.xplor-btn-toggle--disabled.sc-xplor-btn-toggle {\n  background-color: #FAFAFA;\n  color: rgba(0, 0, 0, 0.38);\n  border-color: rgba(0, 0, 0, 0.12);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.xplor-btn-toggle--disabled.xplor-btn-toggle--active.sc-xplor-btn-toggle {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.xplor-btn-toggle--inactive-outlined.sc-xplor-btn-toggle {\n  border-color: #757575;\n}\n.xplor-btn-toggle.sc-xplor-btn-toggle:hover:not(.xplor-btn-toggle--disabled) {\n  background-color: #F5F5F5;\n}\n.xplor-btn-toggle.sc-xplor-btn-toggle:hover:not(.xplor-btn-toggle--disabled).xplor-btn-toggle--active {\n  background-color: #D0EBD2;\n}";
+
+const XplorBtnToggle$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorToggle = createEvent(this, "xplorToggle");
+        /**
+         * Whether the button is active/selected
+         */
+        this.active = false;
+        /**
+         * Button color when active
+         */
+        this.color = 'secondary';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether to show outline when inactive
+         */
+        this.inactiveOutlined = false;
+        this.handleClick = () => {
+            if (!this.disabled) {
+                this.active = !this.active;
+                this.xplorToggle.emit(this.active);
+            }
+        };
+    }
+    render() {
+        const buttonClasses = {
+            'xplor-btn-toggle': true,
+            'xplor-btn-toggle--active': this.active,
+            'xplor-btn-toggle--disabled': this.disabled,
+            'xplor-btn-toggle--inactive-outlined': this.inactiveOutlined && !this.active,
+        };
+        return (h(Host, { key: '9434059f3e934707d2be2dbabe539ef6f06dbf66' }, h("button", { key: 'bbdc0032e4eb79951d06fb47e19ab76a842f0c46', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: 'c5944a5ce768ca5f1cafa5f33dcf72145c94b189' }))));
+    }
+    static get style() { return xplorBtnToggleCss; }
+}, [6, "xplor-btn-toggle", {
+        "active": [1028],
+        "color": [1],
+        "disabled": [4],
+        "inactiveOutlined": [4, "inactive-outlined"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnToggle$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnToggle = XplorBtnToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnToggle, defineCustomElement };
+//# sourceMappingURL=xplor-btn-toggle.js.map
+
+//# sourceMappingURL=xplor-btn-toggle.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-btn-toggle.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mvPAAmvP;;MCOhwPA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AAOjC,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;gBAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEtC,SAAC;AAuBF;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,kBAAkB,EAAE,IAAI;YACxB,0BAA0B,EAAE,IAAI,CAAC,MAAM;YACvC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;YAC3C,qCAAqC,EAAE,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,MAAM;SAC7E;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,cAAA,EACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,EAE5C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnToggle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-toggle/xplor-btn-toggle.scss?tag=xplor-btn-toggle&encapsulation=scoped","src/components/xplor-btn-toggle/xplor-btn-toggle.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.xplor-btn-toggle {\n  border: 1px solid #E0E0E0;\n  border-radius: 1rem;\n  min-width: 4rem;\n  padding: 0.5rem 1rem;\n  background-color: white;\n  color: #757575;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  transition: all 0.2s ease;\n  margin-right: 0.5rem;\n\n  &:first-of-type {\n    margin-left: 0;\n  }\n\n  &--active {\n    background-color: #E6F7F7;\n    color: #008480;\n    border-color: #008480;\n  }\n\n  &--disabled {\n    background-color: #FAFAFA;\n    color: rgba(0, 0, 0, 0.38);\n    border-color: rgba(0, 0, 0, 0.12);\n    cursor: not-allowed;\n    pointer-events: none;\n\n    &.xplor-btn-toggle--active {\n      background-color: rgba(0, 0, 0, 0.05);\n    }\n  }\n\n  &--inactive-outlined {\n    border-color: #757575;\n  }\n\n  &:hover:not(.xplor-btn-toggle--disabled) {\n    background-color: #F5F5F5;\n\n    &.xplor-btn-toggle--active {\n      background-color: #D0EBD2;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-btn-toggle',\n  styleUrl: 'xplor-btn-toggle.scss',\n  scoped: true,\n})\nexport class XplorBtnToggle {\n  /**\n   * Whether the button is active/selected\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * Button color when active\n   */\n  @Prop() color: string = 'secondary';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show outline when inactive\n   */\n  @Prop() inactiveOutlined: boolean = false;\n\n  /**\n   * Toggle event\n   */\n  @Event() xplorToggle: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.active = !this.active;\n      this.xplorToggle.emit(this.active);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'xplor-btn-toggle': true,\n      'xplor-btn-toggle--active': this.active,\n      'xplor-btn-toggle--disabled': this.disabled,\n      'xplor-btn-toggle--inactive-outlined': this.inactiveOutlined && !this.active,\n    };\n\n    return (\n      <Host>\n        <button\n          class={buttonClasses}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          aria-pressed={this.active ? 'true' : 'false'}\n        >\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-DIv_A5Gj.js';
+import { d as defineCustomElement$2 } from './p-4l9DAhAo.js';
+
+const xplorBtnTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-tooltip {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-btn-tooltip {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-tooltip {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-tooltip {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-tooltip {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-tooltip {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-tooltip {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-tooltip .mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-tooltip {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-tooltip:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-tooltip {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-tooltip-h {\n  display: inline-block;\n}";
+
+const XplorBtnTooltip$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tooltipPosition = 'top';
+        this.type = 'primary';
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { key: '252d295aa8fa8f6f404727baef30d00dbcac17b8' }, h("xplor-tooltip", { key: 'cba71a8dd339f47b16f4a161a341895ca70e22b0', position: this.tooltipPosition, content: this.tooltipText, trigger: "hover", arrow: true, disabled: this.disabled }, h("xplor-button", { key: '31c167ffa852074e94a2cac255ab10b86ad041ef', slot: "trigger", text: this.text, type: this.type, mode: this.mode, "icon-position": this.iconPosition }, h("slot", { key: 'aef011d1873e4f81237f88d651f5bfb7c0fb2569' })))));
+    }
+    static get style() { return xplorBtnTooltipCss; }
+}, [6, "xplor-btn-tooltip", {
+        "text": [1],
+        "tooltipText": [1, "tooltip-text"],
+        "tooltipPosition": [1, "tooltip-position"],
+        "type": [1],
+        "mode": [1],
+        "iconPosition": [1, "icon-position"],
+        "disabled": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-btn-tooltip", "xplor-button", "xplor-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-btn-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorBtnTooltip$1);
+            }
+            break;
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "xplor-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorBtnTooltip = XplorBtnTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorBtnTooltip, defineCustomElement };
+//# sourceMappingURL=xplor-btn-tooltip.js.map
+
+//# sourceMappingURL=xplor-btn-tooltip.js.map

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

@@ -0,0 +1 @@
+{"file":"xplor-btn-tooltip.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,unNAAunN;;MCOroNA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;AAQY,QAAA,IAAe,CAAA,eAAA,GAAwC,KAAK;AAC5D,QAAA,IAAI,CAAA,IAAA,GAAmD,SAAS;AAGhE,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAyBpC;IAvBG,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CACI,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CACI,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,eAAA,EACA,IAAI,CAAC,YAAY,EAAA,EAEhC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACG,CACH,CACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnTooltip","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-tooltip/xplor-btn-tooltip.scss?tag=xplor-btn-tooltip&encapsulation=scoped","src/components/xplor-btn-tooltip/xplor-btn-tooltip.tsx"],"sourcesContent":[":host {\n    display: inline-block;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-btn-tooltip',\n    styleUrl: 'xplor-btn-tooltip.scss',\n    scoped: true,\n})\nexport class XplorBtnTooltip {\n    @Prop() text: string;\n    @Prop() tooltipText: string;\n    @Prop() tooltipPosition: 'top' | 'bottom' | 'left' | 'right' = 'top';\n    @Prop() type: 'primary' | 'secondary' | 'ghost' | 'disabled' = 'primary';\n    @Prop() mode: 'office' | 'pg';\n    @Prop() iconPosition: 'start' | 'end';\n    @Prop() disabled: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <xplor-tooltip\n                    position={this.tooltipPosition}\n                    content={this.tooltipText}\n                    trigger=\"hover\"\n                    arrow={true}\n                    disabled={this.disabled}\n                >\n                    <xplor-button\n                        slot=\"trigger\"\n                        text={this.text}\n                        type={this.type}\n                        mode={this.mode}\n                        icon-position={this.iconPosition}\n                    >\n                        <slot />\n                    </xplor-button>\n                </xplor-tooltip>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

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

package/dist/components/xplor-button.js

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

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

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

package/dist/components/xplor-chat-widget.d.ts

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