@xplor-education/core-stencil-components 2.0.0 → 2.1.0

package/dist/collection/components/xplor-input-select/xplor-input-select.js

@@ -55,6 +55,17 @@ export class XplorInputSelect {
         this.required = false;
         this.isOpen = false;
         this.isFocused = false;
+        this.menuPosition = null;
+        this.updateMenuPosition = () => {
+            if (this.fieldRef) {
+                const rect = this.fieldRef.getBoundingClientRect();
+                this.menuPosition = {
+                    top: rect.bottom + 4,
+                    left: rect.left,
+                    width: rect.width,
+                };
+            }
+        };
         this.handleOutsideClick = (event) => {
             if (this.selectRef && !this.selectRef.contains(event.target)) {
                 this.isOpen = false;
@@ -62,6 +73,9 @@ export class XplorInputSelect {
         };
         this.toggleDropdown = () => {
             if (!this.disabled && !this.readonly) {
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                }
                 this.isOpen = !this.isOpen;
             }
         };
@@ -116,10 +130,15 @@ export class XplorInputSelect {
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '186b55603079f4fec337dc824c2e3a4776472ae6' }, h("div", { key: '07d765115aa286e8da1f13fc76f55c6c6e9008c1', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '6e1116ba611eee1673ffdb71c5bb15455afd5921', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '77cefc98c67261ebcddac9c179f01cd6615306e8', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b65e671edced0c0f1780ecdd74cc23197310a550', class: "xplor-input-select__field", onClick: this.toggleDropdown }, h("div", { key: '52e7b58288c7d4c7ad4d505ae03f75204d461f15', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '7c780d75bc62648aed641e0d4be4e4d55065099b', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("div", { key: '809f4c0254c09d61cdf597e467daf8d1f5f7667c', class: "xplor-input-select__menu" }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
+        return (h(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+                position: 'fixed',
+                top: `${this.menuPosition.top}px`,
+                left: `${this.menuPosition.left}px`,
+                width: `${this.menuPosition.width}px`,
+            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
                 'xplor-input-select__option': true,
                 'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '73f7808a7261cce5b3dc6e28e9771d9d669835d7', class: "xplor-input-select__details" }, this.error && h("div", { key: '9e934df8f33b080fd528fa99d0c5a4cb78c8f03a', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '8c0bdbc7304c433cca0d85d09c213f6ccf5f3b29', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
     }
     static get is() { return "xplor-input-select"; }
     static get encapsulation() { return "scoped"; }
@@ -405,7 +424,8 @@ export class XplorInputSelect {
     static get states() {
         return {
             "isOpen": {},
-            "isFocused": {}
+            "isFocused": {},
+            "menuPosition": {}
         };
     }
     static get events() {

package/dist/collection/components/xplor-input-select/xplor-input-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-input-select.js","sourceRoot":"","sources":["../../../src/components/xplor-input-select/xplor-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n  value: any;\n  title: string;\n  subtitle?: string;\n  [key: string]: any;\n}\n\n@Component({\n  tag: 'xplor-input-select',\n  styleUrl: 'xplor-input-select.scss',\n  scoped: true,\n})\nexport class XplorInputSelect {\n  private selectRef: HTMLDivElement;\n\n  /**\n   * Selected value(s)\n   */\n  @Prop({ mutable: true }) value: any | any[] = null;\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Select...';\n\n  /**\n   * Options array\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /**\n   * Whether multiple selection is allowed\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the select is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the select is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<any>;\n\n  @State() isOpen: boolean = false;\n  @State() isFocused: boolean = false;\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.selectRef && !this.selectRef.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private toggleDropdown = () => {\n    if (!this.disabled && !this.readonly) {\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleOptionClick = (option: SelectOption) => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      const index = currentValue.findIndex((v) => v === option.value);\n\n      if (index > -1) {\n        this.value = currentValue.filter((_, i) => i !== index);\n      } else {\n        this.value = [...currentValue, option.value];\n      }\n    } else {\n      this.value = option.value;\n      this.isOpen = false;\n    }\n\n    this.xplorChange.emit(this.value);\n  };\n\n  private isSelected = (option: SelectOption): boolean => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      return currentValue.includes(option.value);\n    }\n    return this.value === option.value;\n  };\n\n  private getDisplayValue = (): string => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      if (currentValue.length === 0) return this.placeholder;\n\n      const selectedOptions = this.options.filter((opt) =>\n        currentValue.includes(opt.value)\n      );\n      return `${selectedOptions.length} selected`;\n    }\n\n    const selectedOption = this.options.find((opt) => opt.value === this.value);\n    return selectedOption ? selectedOption.title : this.placeholder;\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-select': true,\n      'xplor-input-select--open': this.isOpen,\n      'xplor-input-select--focused': this.isFocused,\n      'xplor-input-select--disabled': this.disabled,\n      'xplor-input-select--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n          {this.label && (\n            <label class=\"xplor-input-select__label\">\n              {this.label}\n              {this.required && <span class=\"xplor-input-select__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown}>\n            <div class=\"xplor-input-select__value\">\n              {this.getDisplayValue()}\n            </div>\n            <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"xplor-input-select__menu\">\n              {this.options.length === 0 ? (\n                <div class=\"xplor-input-select__empty\">No options available</div>\n              ) : (\n                this.options.map((option) => (\n                  <div\n                    key={option.value}\n                    class={{\n                      'xplor-input-select__option': true,\n                      'xplor-input-select__option--selected': this.isSelected(option),\n                    }}\n                    onClick={() => this.handleOptionClick(option)}\n                  >\n                    {this.multiple && (\n                      <input\n                        type=\"checkbox\"\n                        class=\"xplor-input-select__checkbox\"\n                        checked={this.isSelected(option)}\n                        readOnly\n                      />\n                    )}\n                    <div class=\"xplor-input-select__option-content\">\n                      <div class=\"xplor-input-select__option-title\">{option.title}</div>\n                      {option.subtitle && (\n                        <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n                      )}\n                    </div>\n                  </div>\n                ))\n              )}\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"xplor-input-select__details\">\n              {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-input-select.js","sourceRoot":"","sources":["../../../src/components/xplor-input-select/xplor-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface SelectOption {\n  value: any;\n  title: string;\n  subtitle?: string;\n  [key: string]: any;\n}\n\n@Component({\n  tag: 'xplor-input-select',\n  styleUrl: 'xplor-input-select.scss',\n  scoped: true,\n})\nexport class XplorInputSelect {\n  private selectRef: HTMLDivElement;\n  private fieldRef: HTMLDivElement;\n\n  /**\n   * Selected value(s)\n   */\n  @Prop({ mutable: true }) value: any | any[] = null;\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = 'Select...';\n\n  /**\n   * Options array\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /**\n   * Whether multiple selection is allowed\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the select is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the select is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<any>;\n\n  @State() isOpen: boolean = false;\n  @State() isFocused: boolean = false;\n  @State() menuPosition: { top: number; left: number; width: number } = null;\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n  }\n\n  private updateMenuPosition = () => {\n    if (this.fieldRef) {\n      const rect = this.fieldRef.getBoundingClientRect();\n      this.menuPosition = {\n        top: rect.bottom + 4,\n        left: rect.left,\n        width: rect.width,\n      };\n    }\n  };\n\n  private handleOutsideClick = (event: MouseEvent) => {\n    if (this.selectRef && !this.selectRef.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private toggleDropdown = () => {\n    if (!this.disabled && !this.readonly) {\n      if (!this.isOpen) {\n        this.updateMenuPosition();\n      }\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleOptionClick = (option: SelectOption) => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      const index = currentValue.findIndex((v) => v === option.value);\n\n      if (index > -1) {\n        this.value = currentValue.filter((_, i) => i !== index);\n      } else {\n        this.value = [...currentValue, option.value];\n      }\n    } else {\n      this.value = option.value;\n      this.isOpen = false;\n    }\n\n    this.xplorChange.emit(this.value);\n  };\n\n  private isSelected = (option: SelectOption): boolean => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      return currentValue.includes(option.value);\n    }\n    return this.value === option.value;\n  };\n\n  private getDisplayValue = (): string => {\n    if (this.multiple) {\n      const currentValue = Array.isArray(this.value) ? this.value : [];\n      if (currentValue.length === 0) return this.placeholder;\n\n      const selectedOptions = this.options.filter((opt) =>\n        currentValue.includes(opt.value)\n      );\n      return `${selectedOptions.length} selected`;\n    }\n\n    const selectedOption = this.options.find((opt) => opt.value === this.value);\n    return selectedOption ? selectedOption.title : this.placeholder;\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-select': true,\n      'xplor-input-select--open': this.isOpen,\n      'xplor-input-select--focused': this.isFocused,\n      'xplor-input-select--disabled': this.disabled,\n      'xplor-input-select--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses} ref={(el) => (this.selectRef = el)}>\n          {this.label && (\n            <label class=\"xplor-input-select__label\">\n              {this.label}\n              {this.required && <span class=\"xplor-input-select__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-select__field\" onClick={this.toggleDropdown} ref={(el) => (this.fieldRef = el)}>\n            <div class=\"xplor-input-select__value\">\n              {this.getDisplayValue()}\n            </div>\n            <span class=\"xplor-input-select__arrow\">{this.isOpen ? '▲' : '▼'}</span>\n          </div>\n\n          {this.isOpen && this.menuPosition && (\n            <div\n              class=\"xplor-input-select__menu\"\n              style={{\n                position: 'fixed',\n                top: `${this.menuPosition.top}px`,\n                left: `${this.menuPosition.left}px`,\n                width: `${this.menuPosition.width}px`,\n              }}\n            >\n              {this.options.length === 0 ? (\n                <div class=\"xplor-input-select__empty\">No options available</div>\n              ) : (\n                this.options.map((option) => (\n                  <div\n                    key={option.value}\n                    class={{\n                      'xplor-input-select__option': true,\n                      'xplor-input-select__option--selected': this.isSelected(option),\n                    }}\n                    onClick={() => this.handleOptionClick(option)}\n                  >\n                    {this.multiple && (\n                      <input\n                        type=\"checkbox\"\n                        class=\"xplor-input-select__checkbox\"\n                        checked={this.isSelected(option)}\n                        readOnly\n                      />\n                    )}\n                    <div class=\"xplor-input-select__option-content\">\n                      <div class=\"xplor-input-select__option-title\">{option.title}</div>\n                      {option.subtitle && (\n                        <div class=\"xplor-input-select__option-subtitle\">{option.subtitle}</div>\n                      )}\n                    </div>\n                  </div>\n                ))\n              )}\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"xplor-input-select__details\">\n              {this.error && <div class=\"xplor-input-select__error-message\">{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-select__helper-text\">{this.helperText}</div>}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-input-send/xplor-input-send.js

@@ -36,10 +36,10 @@ export class XplorInputSend {
         this.internalValue = this.value;
     }
     render() {
-        return (h(Host, { key: 'bbf2f299e9c78afed930b178f67494f3c9171ca0' }, h("div", { key: 'a9e29fbc660b5fcc9ad5e8c0a543d39b39073cf9', class: {
+        return (h(Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, h("input", { key: '645f813fd6aad4905635c392afd87ead717bd3d4', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '0c5ea75208baea586babbd9ecfa8a433da65e2be', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, h("input", { key: '93aca7121d132bb72d812db77f8ff85be31a00aa', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), h("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
     static get is() { return "xplor-input-send"; }
     static get encapsulation() { return "scoped"; }

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

@@ -77,9 +77,9 @@ export class XplorInputText {
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, h("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (h("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), h("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, h("input", { key: '41c1c60d8dbdea750477a17d32b110ef826e73a6', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', name: "append" }))));
+            } }), h("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (h("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && h("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: 'c10099eb2c41e38cc65170a5acb6897b949b8173', name: "append" }))));
     }
     static get is() { return "xplor-input-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -79,9 +79,9 @@ export class XplorInputTextArea {
         };
         const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '1acbd7f541a1673ead7718eba34c514ffdc7057c' }, h("div", { key: 'e7e9c3964c63d585b1837362da89720f353a7b7d', class: containerClasses }, this.label && (h("label", { key: '4313a150717b50a08d82179292e1b3eb38c53821', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '96ecf54bf62d2f519c72f48e7698683eb9b2c869', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '36317993f4045d9dc86cf85e67cf7fd2a0e663c2', class: "xplor-input-text-area__field" }, h("textarea", { key: '9c98044198dae93a6a46fcbc26239208203befc1', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, h("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (h("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && h("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, h("textarea", { key: 'e05d3c094930b2993b5c959b1dfce569ad1b01d0', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), showClearButton && (h("button", { key: '8495d86ff604f538cb7b2144eea778dafc414a74', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'd51398eb122563ced96d1e92d381740a6cb484d2', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '83d436bf141d4f4594f5c1dfeae9ab3de7ac4301', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'db6c99c12fc9197785b10b8703d81fdb21488934', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
+            } }), showClearButton && (h("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && h("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '0eb05a84b610b3971e76cbd5f566f32ba260eacb', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
     }
     static get is() { return "xplor-input-text-area"; }
     static get encapsulation() { return "scoped"; }

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

@@ -42,9 +42,9 @@ export class XplorInputTextSecondary {
             'input-secondary--dirty': this.isDirty,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'd7b5a95dba54e640b3bc0fb0e5e5ad07d209f21c' }, h("div", { key: 'dc0cc65fb5f74f8ed8f173c0736899afb5201ad1', class: containerClasses }, this.label && (h("label", { key: '328c402c4e0a05252ea0dd965c7b274c06e99864', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '6c4217b11971405df02ee5a7a07ece655860cabf', class: "input-secondary__required" }, "*"))), h("div", { key: '30179854ac1c1eaa8a6c3f39cdf7a0fff4c45103', class: "input-secondary__field" }, h("input", { key: 'ddb142835cf10d39fea9ff1b2023ed0cad968f9f', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, h("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (h("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && h("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), h("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, h("input", { key: '146cf2b3413de110e7aaadd19fc8da7bb824af4a', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: 'a2a0a03935964ba65591508ec50081323ac2c33a', name: "append-inner" })), showDetails && (h("div", { key: 'f3b0025dbaaf4a6bbbef5d1f0edd5866e0e79267', class: "input-secondary__details" }, this.error && h("div", { key: '91835745a04b17003b3c2254c6a5c405d36f3b08', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '96948fed46bb7765699a57c1017d0dbe3c4e2ec7', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: 'e0ef7c8cea7a11cc05636e3d020737957fc49040', name: "append" }))));
+            } }), h("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (h("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && h("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), h("slot", { key: '8dfc77b85e9d89c8c3fdbae4569e7b1ddc6ccb0d', name: "append" }))));
     }
     static get is() { return "xplor-input-text-secondary"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,7 +29,7 @@ export class XplorInputTitle {
         };
     }
     render() {
-        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+        return (h(Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, h("input", { key: '0b79c0e500edcbd89a1e6f7bf4e1ea1b584b7a3e', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get is() { return "xplor-input-title"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class XplorLinks {
     render() {
-        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, h("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, h("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, h("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '74b69e6d9f0d99b8653704e9fac32fa4ce50f211', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'c8e457f3529ad8340c84d5bad80431b3c42318c8', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, h("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, h("img", { key: 'ecea3e92117d535dbd3c97d0868d5888c61a3b26', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), h("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, h("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get is() { return "xplor-links"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class XplorModalPersistent {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
     }
     static get is() { return "xplor-modal-persistent"; }
     static get properties() {

package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.css

@@ -0,0 +1,271 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    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);
+    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);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class XplorRadioBtn {
+    render() {
+        return (h(Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+    }
+    static get is() { return "xplor-radio-btn"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-radio-btn.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-radio-btn.css"]
+        };
+    }
+}
+//# sourceMappingURL=xplor-radio-btn.js.map

package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-radio-btn.js","sourceRoot":"","sources":["../../../src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4EAAqB;YACrB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-radio-btn',\n  styleUrl: 'xplor-radio-btn.scss',\n  shadow: true,\n})\nexport class XplorRadioBtn {\n  render() {\n    return (\n      <Host>\n        <h1>I'm a button</h1>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-section-card/xplor-section-card.js

@@ -6,11 +6,11 @@ export class XplorSectionCard {
         this.padding = '1.5rem';
     }
     render() {
-        return (h(Host, { key: '667ddbeb2048497ae0ec2d23876f50058e9b4870' }, h("div", { key: 'ccbce0700966f088c5a053df2169d466529d4ce3', class: {
+        return (h(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, h("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, h("slot", { key: 'edd611a0afe1e5343ddedabf7d1daec8962a037b', name: "title" }), h("slot", { key: '2543fd02c710dd9045a7e5920ddc625712febc71', name: "subtitle" }), h("div", { key: 'bdd87422f48d711b43e6a1bf3f27a08d33819d1e', class: "section-card__body" }, h("slot", { key: '4989480c1010e3bae58cfeba4e0637e5fc1397da', name: "body" })), h("div", { key: '891bd2f17631f7f2732dbb04caefb26503d30e75', class: "section-card__actions" }, h("slot", { key: '8d49640f1c96c75afb915ed4acd1dd574ae4c2b9', name: "actions" })))));
+            }, style: { padding: this.padding } }, h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), h("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, h("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
     }
     static get is() { return "xplor-section-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-section-heading/xplor-section-heading.js

@@ -4,11 +4,11 @@ export class XplorSectionHeading {
         this.size = 'medium';
     }
     render() {
-        return (h(Host, { key: '4c30a434a144abb7ba1925a4fe98847fb8a0e09c' }, h("span", { key: 'faa456eebb9ba58d55945f0b5f6db9e02efd9d31', class: {
+        return (h(Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, h("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, h("slot", { key: '3a164def63f5365f6a76702e7a8462fe0ce4fcc9' }, this.text))));
+            } }, h("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
     }
     static get is() { return "xplor-section-heading"; }
     static get encapsulation() { return "scoped"; }