@actabldesign/bellhop-core 0.0.3

package/components/bh-input-password.js

@@ -0,0 +1,229 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
+import { a as syncFormValue, u as updateValidity } from './p-2KjdCYlS.js';
+import { d as defineCustomElement$3 } from './p-MIbEYjCv.js';
+import { d as defineCustomElement$2 } from './p-D6kh9oF2.js';
+
+const bhInputPasswordCss = ":host{display:block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm, 8px);width:100%}.input-container{display:flex;align-items:center;gap:var(--spacing-md, 12px);padding:var(--spacing-md, 12px);height:36px;width:100%;background:var(--color-white, #FFFFFF);border:1px solid var(--color-neutral-300, #D0D5DD);border-radius:var(--spacing-md, 8px);transition:all 0.2s ease-in-out;cursor:text;box-sizing:border-box}.input-container.input-container-with-leading{padding:var(--spacing-md, 12px) var(--spacing-lg, 16px)}.input-container.input-container-hover{border-color:var(--color-brand-500, #7F56D9)}.input-container.input-container-focused{border-color:var(--color-brand-500, #7F56D9);box-shadow:0 0 0 1px var(--color-brand-500, #7F56D9)}.input-container.input-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50, #F9FAFB)}.input-container.input-container-error{border-color:var(--color-error-300, #FDA29B)}.input-container.input-container-error.input-container-hover{border-color:var(--color-error-500, #F05250)}.input-container.input-container-error.input-container-focused{border-color:var(--color-brand-600, #6941C6)}.input-content{display:flex;align-items:center;gap:var(--spacing-md, 12px);flex:1;height:100%;min-width:0}.input-element{flex:1;height:100%;border:none;outline:none;background:transparent;font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-800, #1D2939);min-width:60px;padding:0}.input-element:focus{outline:none;border:none;box-shadow:none}.input-element::placeholder{color:var(--color-neutral-500, #667085)}.input-element:disabled{cursor:not-allowed}.leading-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-500, #667085);user-select:none;flex-shrink:0;cursor:default;transition:color 0.2s ease-in-out}.input-container-focused .leading-icon{color:var(--color-brand-600, #6941C6)}.visibility-toggle{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-400, #98A2B3);cursor:pointer;user-select:none;flex-shrink:0;transition:color 0.2s ease-in-out}.visibility-toggle:hover{color:var(--color-neutral-600, #475467)}.input-container-disabled .visibility-toggle{cursor:not-allowed;pointer-events:none}.hint-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-600, #475467)}.hint-text.hint-error{color:var(--color-error-600, #DC2626)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+
+const BhInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class BhInputPassword extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhInput = createEvent(this, "bhInput");
+        this.bhFocus = createEvent(this, "bhFocus");
+        this.bhBlur = createEvent(this, "bhBlur");
+        this.bhHelpClick = createEvent(this, "bhHelpClick");
+        this.bhVisibilityToggle = createEvent(this, "bhVisibilityToggle");
+        this.internals = this.attachInternals();
+    }
+    internals;
+    inputEl;
+    /**
+     * The label for the input
+     */
+    label = 'Password';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Enter your password';
+    /**
+     * Hint text shown below the input
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether to show a leading icon
+     */
+    showLeadingIcon = true;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Password requirements';
+    /**
+     * Leading icon name (Material Symbols)
+     */
+    leadingIcon = 'lock';
+    /**
+     * The input value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Track password visibility
+     */
+    showPassword = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the input gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the input loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    /**
+     * Emitted when visibility is toggled
+     */
+    bhVisibilityToggle;
+    componentDidLoad() {
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.inputEl) {
+            this.inputEl.value = this.defaultValue;
+        }
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        syncFormValue(this);
+        updateValidity(this.internals, this.inputEl, this.validationMessage);
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleMouseEnter = () => {
+        if (!this.isFocused) {
+            this.isHovered = true;
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    togglePasswordVisibility = () => {
+        if (!this.disabled) {
+            this.showPassword = !this.showPassword;
+            this.bhVisibilityToggle.emit(this.showPassword);
+        }
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'input-container': true,
+            'input-container-focused': this.isFocused,
+            'input-container-hover': this.isHovered && !this.isFocused,
+            'input-container-error': this.error,
+            'input-container-disabled': this.disabled,
+            'input-container-with-leading': this.showLeadingIcon,
+        };
+        return (h("div", { key: '65214ad4e72bfdf75610edcac9c3f5723ea87446', class: "input-wrapper", part: "wrapper" }, h("bh-label", { key: 'a7bfffd4d1221aba3ea7642b3589869724d50286', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: '2879a7616747302fbd432321db764a6e63548dae', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '11ef311fc118a7595cb210fac70fda53599756a2', class: "input-content" }, this.showLeadingIcon && (h("span", { key: '805a132b4411f3b4016ea522701ac419915e0e88', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), h("input", { key: '0c4f69d29acb824ccf7fd23dc11b4b4d6385a38b', ref: (el) => (this.inputEl = el), type: this.showPassword ? 'text' : 'password', class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), h("span", { key: 'ce8f1bd6a95110b76a573e0f65ec43a7cfe6846b', class: "material-symbols-outlined visibility-toggle", onClick: this.togglePasswordVisibility, title: this.showPassword ? 'Hide password' : 'Show password' }, this.showPassword ? 'visibility_off' : 'visibility'))), this.showHintText && this.hintText && (h("div", { key: 'cd3f626bd84d01bcda347e2844c7150a474d91eb', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+    static get style() { return bhInputPasswordCss; }
+}, [833, "bh-input-password", {
+        "label": [1],
+        "placeholder": [1],
+        "hintText": [1, "hint-text"],
+        "showLabel": [4, "show-label"],
+        "showHintText": [4, "show-hint-text"],
+        "showHelpIcon": [4, "show-help-icon"],
+        "showLeadingIcon": [4, "show-leading-icon"],
+        "error": [4],
+        "disabled": [4],
+        "required": [4],
+        "helpIconTooltip": [1, "help-icon-tooltip"],
+        "leadingIcon": [1, "leading-icon"],
+        "value": [1025],
+        "name": [1],
+        "defaultValue": [1, "default-value"],
+        "validationMessage": [1, "validation-message"],
+        "isFocused": [32],
+        "isHovered": [32],
+        "showPassword": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-input-password", "bh-label", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-input-password":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhInputPassword$1);
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhInputPassword = BhInputPassword$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhInputPassword, defineCustomElement };
+//# sourceMappingURL=bh-input-password.js.map
+
+//# sourceMappingURL=bh-input-password.js.map

package/components/bh-input-password.js.map

@@ -0,0 +1 @@
+{"file":"bh-input-password.js","mappings":"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","names":["BhInputPassword","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-input-password/bh-input-password.css?tag=bh-input-password&encapsulation=shadow","src/components/bh-input-password/bh-input-password.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* Input Wrapper */\n.input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm, 8px);\n  width: 100%;\n}\n\n/* Input Container */\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  padding: var(--spacing-md, 12px);\n  height: 36px;\n  width: 100%;\n  background: var(--color-white, #FFFFFF);\n  border: 1px solid var(--color-neutral-300, #D0D5DD);\n  border-radius: var(--spacing-md, 8px);\n  transition: all 0.2s ease-in-out;\n  cursor: text;\n  box-sizing: border-box;\n}\n\n.input-container.input-container-with-leading {\n  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\n}\n\n/* Input States */\n.input-container.input-container-hover {\n  border-color: var(--color-brand-500, #7F56D9);\n}\n\n.input-container.input-container-focused {\n  border-color: var(--color-brand-500, #7F56D9);\n  box-shadow: 0 0 0 1px var(--color-brand-500, #7F56D9);\n}\n\n.input-container.input-container-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--color-neutral-50, #F9FAFB);\n}\n\n.input-container.input-container-error {\n  border-color: var(--color-error-300, #FDA29B);\n}\n\n.input-container.input-container-error.input-container-hover {\n  border-color: var(--color-error-500, #F05250);\n}\n\n.input-container.input-container-error.input-container-focused {\n  border-color: var(--color-brand-600, #6941C6);\n}\n\n/* Input Content */\n.input-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Input Element */\n.input-element {\n  flex: 1;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-800, #1D2939);\n  min-width: 60px;\n  padding: 0;\n}\n\n.input-element:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.input-element::placeholder {\n  color: var(--color-neutral-500, #667085);\n}\n\n.input-element:disabled {\n  cursor: not-allowed;\n}\n\n/* Leading Icon */\n.leading-icon {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-500, #667085);\n  user-select: none;\n  flex-shrink: 0;\n  cursor: default;\n  transition: color 0.2s ease-in-out;\n}\n\n.input-container-focused .leading-icon {\n  color: var(--color-brand-600, #6941C6);\n}\n\n/* Visibility Toggle */\n.visibility-toggle {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-400, #98A2B3);\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n  transition: color 0.2s ease-in-out;\n}\n\n.visibility-toggle:hover {\n  color: var(--color-neutral-600, #475467);\n}\n\n.input-container-disabled .visibility-toggle {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Hint Text */\n.hint-text {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-600, #475467);\n}\n\n.hint-text.hint-error {\n  color: var(--color-error-600, #DC2626);\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\n@Component({\n  tag: 'bh-input-password',\n  styleUrl: 'bh-input-password.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhInputPassword {\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputEl?: HTMLInputElement;\n  /**\n   * The label for the input\n   */\n  @Prop() label: string = 'Password';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Enter your password';\n\n  /**\n   * Hint text shown below the input\n   */\n  @Prop() hintText: string = '';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Whether to show a leading icon\n   */\n  @Prop() showLeadingIcon: boolean = true;\n\n  /**\n   * Whether the field has an error\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Password requirements';\n\n  /**\n   * Leading icon name (Material Symbols)\n   */\n  @Prop() leadingIcon: string = 'lock';\n\n  /**\n   * The input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Default value for form reset\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Custom validation message\n   */\n  @Prop() validationMessage: string = '';\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Track password visibility\n   */\n  @State() showPassword: boolean = false;\n\n  \n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() bhBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  /**\n   * Emitted when visibility is toggled\n   */\n  @Event() bhVisibilityToggle!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.inputEl) {\n      this.inputEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl);\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n    this.bhFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n    this.bhBlur.emit();\n  };\n\n  private handleMouseEnter = (): void => {\n    if (!this.isFocused) {\n      this.isHovered = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private togglePasswordVisibility = (): void => {\n    if (!this.disabled) {\n      this.showPassword = !this.showPassword;\n      this.bhVisibilityToggle.emit(this.showPassword);\n    }\n  };\n\n  private handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'input-container': true,\n      'input-container-focused': this.isFocused,\n      'input-container-hover': this.isHovered && !this.isFocused,\n      'input-container-error': this.error,\n      'input-container-disabled': this.disabled,\n      'input-container-with-leading': this.showLeadingIcon,\n    };\n\n    return (\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          showHelpIcon={this.showHelpIcon}\n          helpIconTooltip={this.helpIconTooltip}\n          disabled={this.disabled}\n          onBhHelpClick={this.handleHelpClick}\n        >\n          <div\n            class={containerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            <div class=\"input-content\">\n              {this.showLeadingIcon && (\n                <span class=\"material-symbols-outlined leading-icon\">\n                  {this.leadingIcon}\n                </span>\n              )}\n              <input\n                ref={(el) => (this.inputEl = el)}\n                type={this.showPassword ? 'text' : 'password'}\n                class=\"input-element\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                aria-label={this.label}\n                aria-describedby={this.showHintText && this.hintText ? 'hint-text' : undefined}\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"input\"\n              />\n            </div>\n            <span\n              class=\"material-symbols-outlined visibility-toggle\"\n              onClick={this.togglePasswordVisibility}\n              title={this.showPassword ? 'Hide password' : 'Show password'}\n            >\n              {this.showPassword ? 'visibility_off' : 'visibility'}\n            </span>\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div\n            class={{ 'hint-text': true, 'hint-error': this.error }}\n            id=\"hint-text\"\n          >\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/bh-input-text.d.ts

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

package/components/bh-input-text.js

@@ -0,0 +1,9 @@
+import { B as BhInputText$1, d as defineCustomElement$1 } from './p-Dbl0HXBJ.js';
+
+const BhInputText = BhInputText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhInputText, defineCustomElement };
+//# sourceMappingURL=bh-input-text.js.map
+
+//# sourceMappingURL=bh-input-text.js.map

package/components/bh-input-text.js.map

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

package/components/bh-input-verification.d.ts

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

package/components/bh-input-verification.js

@@ -0,0 +1,255 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-MIbEYjCv.js';
+import { d as defineCustomElement$2 } from './p-D6kh9oF2.js';
+
+const bhInputVerificationCss = ":host{display:block}.input-verification-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:fit-content}.input-verification-container{display:flex;align-items:center;gap:var(--spacing-sm)}.verification-input{width:64px;height:64px;padding:0;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);background-color:var(--color-white);font-family:var(--font-inter);font-size:3rem;font-weight:var(--weight-medium);line-height:1;color:var(--color-neutral-900);transition:all 150ms ease;outline:none;box-sizing:border-box}.verification-input.size-sm{width:64px;height:64px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-md)}.verification-input.size-md{width:80px;height:80px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-3xl)}.verification-input.size-lg{width:96px;height:96px;font-size:3.75rem;border-radius:var(--radius-lg);padding:var(--spacing-3xl) var(--spacing-4xl)}.verification-input:hover:not(:disabled){border-color:var(--color-neutral-400)}.verification-input:focus{border-color:var(--color-brand-300);box-shadow:0 0 0 4px var(--color-brand-100)}.verification-input.error{border-color:var(--color-error-300)}.verification-input.error:focus{border-color:var(--color-error-300);box-shadow:0 0 0 4px var(--color-error-100)}.verification-input:disabled{background-color:var(--color-neutral-50);border-color:var(--color-neutral-300);color:var(--color-neutral-400);cursor:not-allowed}.separator{font-family:var(--font-inter);font-size:1.5rem;font-weight:var(--weight-medium);color:var(--color-neutral-400);margin:0 var(--spacing-xs);line-height:1}.separator.size-sm{font-size:1.5rem}.separator.size-md{font-size:1.5rem}.separator.size-lg{font-size:1.875rem}.hint-text{font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin-top:var(--spacing-xs)}.hint-text.error{color:var(--color-error-600)}.verification-input::placeholder{color:var(--color-neutral-400);opacity:1;font-size:inherit;font-weight:var(--weight-regular)}";
+
+const BhInputVerification$1 = /*@__PURE__*/ proxyCustomElement(class BhInputVerification extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhComplete = createEvent(this, "bhComplete");
+    }
+    get el() { return this; }
+    /**
+     * Size variant of the input fields
+     */
+    size = 'md';
+    /**
+     * Number of digits (4 or 6)
+     */
+    digits = 4;
+    /**
+     * Label text for the input
+     */
+    label = 'Secure code';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Hint text displayed below the inputs
+     */
+    hintText = 'This is a hint text to help user.';
+    /**
+     * Whether to show the hint text
+     */
+    showHintText = true;
+    /**
+     * Whether the input is in an error state
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Whether to show the separator for 6-digit codes
+     */
+    showSeparator = true;
+    /**
+     * Placeholder character for empty inputs
+     */
+    placeholder = '';
+    /**
+     * Width of the component
+     */
+    width = '';
+    /**
+     * Current value of the verification code
+     */
+    value = '';
+    values = [];
+    inputRefs = [];
+    /**
+     * Event emitted when the value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when all digits are filled
+     */
+    bhComplete;
+    watchValue(newValue) {
+        const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+        this.values = newValues;
+    }
+    watchDigits() {
+        this.values = Array(this.digits).fill('');
+    }
+    componentWillLoad() {
+        this.values = this.value
+            ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)
+            : Array(this.digits).fill('');
+    }
+    componentDidLoad() {
+        // Focus first input on mount if not disabled
+        if (!this.disabled) {
+            const firstInput = this.el.shadowRoot?.querySelector('input');
+            firstInput?.focus();
+        }
+    }
+    updateValues(newValues) {
+        this.values = newValues;
+        const newValue = newValues.join('');
+        this.value = newValue;
+        this.bhChange.emit(newValue);
+        // Check if all fields are filled
+        if (newValues.every(val => val !== '')) {
+            this.bhComplete.emit(newValue);
+        }
+    }
+    handleInputChange(index, event) {
+        const input = event.target;
+        const inputValue = input.value;
+        // Only allow single digits
+        const digit = inputValue.replace(/\D/g, '').slice(-1);
+        const newValues = [...this.values];
+        newValues[index] = digit;
+        this.updateValues(newValues);
+        // Auto-advance to next input if digit entered
+        if (digit && index < this.digits - 1) {
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+    }
+    handleKeyDown(index, event) {
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            if (this.values[index]) {
+                // Clear current field
+                newValues[index] = '';
+                this.updateValues(newValues);
+            }
+            else if (index > 0) {
+                // Move to previous field and clear it
+                newValues[index - 1] = '';
+                this.updateValues(newValues);
+                const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+                prevInput?.focus();
+            }
+        }
+        else if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+            prevInput?.focus();
+        }
+        else if (event.key === 'ArrowRight' && index < this.digits - 1) {
+            event.preventDefault();
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+        else if (event.key >= '0' && event.key <= '9') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            newValues[index] = event.key;
+            this.updateValues(newValues);
+            // Auto-advance to next input
+            if (index < this.digits - 1) {
+                const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+                nextInput?.focus();
+            }
+        }
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const pastedDigits = pastedText.replace(/\D/g, '').slice(0, this.digits);
+        if (pastedDigits) {
+            const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+            this.updateValues(newValues);
+            // Focus on the next empty input or last input
+            const nextEmptyIndex = newValues.findIndex(val => val === '');
+            const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);
+            const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];
+            inputToFocus?.focus();
+        }
+    }
+    handleFocus(event) {
+        const input = event.target;
+        input.select();
+    }
+    renderInputs() {
+        const inputs = [];
+        for (let i = 0; i < this.digits; i++) {
+            // Add separator for 6-digit codes
+            if (this.digits === 6 && i === 3 && this.showSeparator) {
+                inputs.push(h("span", { key: "separator", class: { 'separator': true, [`size-${this.size}`]: true } }, "-"));
+            }
+            inputs.push(h("input", { key: i, type: "text", inputmode: "numeric", pattern: "[0-9]", maxLength: 1, value: this.values[i] || '', placeholder: this.placeholder && i < this.placeholder.length ? this.placeholder[i] : '', disabled: this.disabled, class: {
+                    'verification-input': true,
+                    [`size-${this.size}`]: true,
+                    'error': this.error,
+                }, onInput: (e) => this.handleInputChange(i, e), onKeyDown: (e) => this.handleKeyDown(i, e), onPaste: (e) => this.handlePaste(e), onFocus: (e) => this.handleFocus(e), "aria-label": `Digit ${i + 1} of ${this.digits}` }));
+        }
+        return inputs;
+    }
+    render() {
+        const wrapperStyle = this.width ? { width: this.width } : {};
+        return (h("div", { key: 'a7068d5407c0d09021313fc6103b5073ca74f628', class: "input-verification-wrapper", style: wrapperStyle }, h("bh-label", { key: '7b62a57a432f3d8f4df7befb87f27a09afeb51fd', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, h("div", { key: '99cb7311f66b69731dc1d286bd96662c4035affb', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (h("div", { key: '5fbfc4b1f8c3a251a0d879b2554c390126a391c1', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
+    }
+    static get watchers() { return {
+        "value": ["watchValue"],
+        "digits": ["watchDigits"]
+    }; }
+    static get style() { return bhInputVerificationCss; }
+}, [769, "bh-input-verification", {
+        "size": [1],
+        "digits": [2],
+        "label": [1],
+        "showLabel": [4, "show-label"],
+        "hintText": [1, "hint-text"],
+        "showHintText": [4, "show-hint-text"],
+        "error": [4],
+        "disabled": [4],
+        "required": [4],
+        "showSeparator": [4, "show-separator"],
+        "placeholder": [1],
+        "width": [1],
+        "value": [1025],
+        "values": [32],
+        "inputRefs": [32]
+    }, undefined, {
+        "value": ["watchValue"],
+        "digits": ["watchDigits"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-input-verification", "bh-label", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-input-verification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhInputVerification$1);
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhInputVerification = BhInputVerification$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhInputVerification, defineCustomElement };
+//# sourceMappingURL=bh-input-verification.js.map
+
+//# sourceMappingURL=bh-input-verification.js.map

package/components/bh-input-verification.js.map

@@ -0,0 +1 @@
+{"file":"bh-input-verification.js","mappings":"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","names":["BhInputVerification","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-input-verification/bh-input-verification.css?tag=bh-input-verification&encapsulation=shadow","src/components/bh-input-verification/bh-input-verification.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.input-verification-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  width: fit-content;\n}\n\n.input-verification-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.verification-input {\n  width: 64px;\n  height: 64px;\n  padding: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--radius-lg);\n  background-color: var(--color-white);\n  font-family: var(--font-inter);\n  font-size: 3rem;\n  font-weight: var(--weight-medium);\n  line-height: 1;\n  color: var(--color-neutral-900);\n  transition: all 150ms ease;\n  outline: none;\n  box-sizing: border-box;\n}\n\n/* Size variants */\n.verification-input.size-sm {\n  width: 64px;\n  height: 64px;\n  font-size: 3rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-xl) var(--spacing-md);\n}\n\n.verification-input.size-md {\n  width: 80px;\n  height: 80px;\n  font-size: 3rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-2xl) var(--spacing-3xl);\n}\n\n.verification-input.size-lg {\n  width: 96px;\n  height: 96px;\n  font-size: 3.75rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-3xl) var(--spacing-4xl);\n}\n\n/* States */\n.verification-input:hover:not(:disabled) {\n  border-color: var(--color-neutral-400);\n}\n\n.verification-input:focus {\n  border-color: var(--color-brand-300);\n  box-shadow: 0 0 0 4px var(--color-brand-100);\n}\n\n.verification-input.error {\n  border-color: var(--color-error-300);\n}\n\n.verification-input.error:focus {\n  border-color: var(--color-error-300);\n  box-shadow: 0 0 0 4px var(--color-error-100);\n}\n\n.verification-input:disabled {\n  background-color: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n  color: var(--color-neutral-400);\n  cursor: not-allowed;\n}\n\n.separator {\n  font-family: var(--font-inter);\n  font-size: 1.5rem;\n  font-weight: var(--weight-medium);\n  color: var(--color-neutral-400);\n  margin: 0 var(--spacing-xs);\n  line-height: 1;\n}\n\n.separator.size-sm {\n  font-size: 1.5rem;\n}\n\n.separator.size-md {\n  font-size: 1.5rem;\n}\n\n.separator.size-lg {\n  font-size: 1.875rem;\n}\n\n.hint-text {\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin-top: var(--spacing-xs);\n}\n\n.hint-text.error {\n  color: var(--color-error-600);\n}\n\n.verification-input::placeholder {\n  color: var(--color-neutral-400);\n  opacity: 1;\n  font-size: inherit;\n  font-weight: var(--weight-regular);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\n\nexport type InputVerificationSize = 'sm' | 'md' | 'lg';\nexport type InputVerificationDigits = 4 | 6;\n\n@Component({\n  tag: 'bh-input-verification',\n  styleUrl: 'bh-input-verification.css',\n  shadow: true,\n})\nexport class BhInputVerification {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size variant of the input fields\n   */\n  @Prop() size: InputVerificationSize = 'md';\n\n  /**\n   * Number of digits (4 or 6)\n   */\n  @Prop() digits: InputVerificationDigits = 4;\n\n  /**\n   * Label text for the input\n   */\n  @Prop() label: string = 'Secure code';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Hint text displayed below the inputs\n   */\n  @Prop() hintText: string = 'This is a hint text to help user.';\n\n  /**\n   * Whether to show the hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether the input is in an error state\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the separator for 6-digit codes\n   */\n  @Prop() showSeparator: boolean = true;\n\n  /**\n   * Placeholder character for empty inputs\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Width of the component\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Current value of the verification code\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  @State() values: string[] = [];\n  @State() inputRefs: HTMLInputElement[] = [];\n\n  /**\n   * Event emitted when the value changes\n   */\n  @Event() bhChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when all digits are filled\n   */\n  @Event() bhComplete!: EventEmitter<string>;\n\n  @Watch('value')\n  watchValue(newValue: string) {\n    const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);\n    this.values = newValues;\n  }\n\n  @Watch('digits')\n  watchDigits() {\n    this.values = Array(this.digits).fill('');\n  }\n\n  componentWillLoad() {\n    this.values = this.value\n      ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)\n      : Array(this.digits).fill('');\n  }\n\n  componentDidLoad() {\n    // Focus first input on mount if not disabled\n    if (!this.disabled) {\n      const firstInput = this.el.shadowRoot?.querySelector('input');\n      firstInput?.focus();\n    }\n  }\n\n  private updateValues(newValues: string[]) {\n    this.values = newValues;\n    const newValue = newValues.join('');\n    this.value = newValue;\n    this.bhChange.emit(newValue);\n\n    // Check if all fields are filled\n    if (newValues.every(val => val !== '')) {\n      this.bhComplete.emit(newValue);\n    }\n  }\n\n  private handleInputChange(index: number, event: Event) {\n    const input = event.target as HTMLInputElement;\n    const inputValue = input.value;\n\n    // Only allow single digits\n    const digit = inputValue.replace(/\\D/g, '').slice(-1);\n\n    const newValues = [...this.values];\n    newValues[index] = digit;\n    this.updateValues(newValues);\n\n    // Auto-advance to next input if digit entered\n    if (digit && index < this.digits - 1) {\n      const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n      nextInput?.focus();\n    }\n  }\n\n  private handleKeyDown(index: number, event: KeyboardEvent) {\n    if (event.key === 'Backspace') {\n      event.preventDefault();\n      const newValues = [...this.values];\n\n      if (this.values[index]) {\n        // Clear current field\n        newValues[index] = '';\n        this.updateValues(newValues);\n      } else if (index > 0) {\n        // Move to previous field and clear it\n        newValues[index - 1] = '';\n        this.updateValues(newValues);\n        const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];\n        prevInput?.focus();\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];\n      prevInput?.focus();\n    } else if (event.key === 'ArrowRight' && index < this.digits - 1) {\n      event.preventDefault();\n      const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n      nextInput?.focus();\n    } else if (event.key >= '0' && event.key <= '9') {\n      event.preventDefault();\n      const newValues = [...this.values];\n      newValues[index] = event.key;\n      this.updateValues(newValues);\n\n      // Auto-advance to next input\n      if (index < this.digits - 1) {\n        const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n        nextInput?.focus();\n      }\n    }\n  }\n\n  private handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n\n    const pastedText = event.clipboardData?.getData('text') || '';\n    const pastedDigits = pastedText.replace(/\\D/g, '').slice(0, this.digits);\n\n    if (pastedDigits) {\n      const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);\n      this.updateValues(newValues);\n\n      // Focus on the next empty input or last input\n      const nextEmptyIndex = newValues.findIndex(val => val === '');\n      const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);\n      const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];\n      inputToFocus?.focus();\n    }\n  }\n\n  private handleFocus(event: Event) {\n    const input = event.target as HTMLInputElement;\n    input.select();\n  }\n\n  private renderInputs() {\n    const inputs = [];\n\n    for (let i = 0; i < this.digits; i++) {\n      // Add separator for 6-digit codes\n      if (this.digits === 6 && i === 3 && this.showSeparator) {\n        inputs.push(\n          <span key=\"separator\" class={{ 'separator': true, [`size-${this.size}`]: true }}>\n            -\n          </span>\n        );\n      }\n\n      inputs.push(\n        <input\n          key={i}\n          type=\"text\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]\"\n          maxLength={1}\n          value={this.values[i] || ''}\n          placeholder={this.placeholder && i < this.placeholder.length ? this.placeholder[i] : ''}\n          disabled={this.disabled}\n          class={{\n            'verification-input': true,\n            [`size-${this.size}`]: true,\n            'error': this.error,\n          }}\n          onInput={(e) => this.handleInputChange(i, e)}\n          onKeyDown={(e) => this.handleKeyDown(i, e)}\n          onPaste={(e) => this.handlePaste(e)}\n          onFocus={(e) => this.handleFocus(e)}\n          aria-label={`Digit ${i + 1} of ${this.digits}`}\n        />\n      );\n    }\n\n    return inputs;\n  }\n\n  render() {\n    const wrapperStyle = this.width ? { width: this.width } : {};\n\n    return (\n      <div class=\"input-verification-wrapper\" style={wrapperStyle}>\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          disabled={this.disabled}\n        >\n          <div class=\"input-verification-container\">\n            {this.renderInputs()}\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div class={{ 'hint-text': true, 'error': this.error }}>\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/bh-label.d.ts

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

package/components/bh-label.js

@@ -0,0 +1,9 @@
+import { B as BhLabel$1, d as defineCustomElement$1 } from './p-MIbEYjCv.js';
+
+const BhLabel = BhLabel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhLabel, defineCustomElement };
+//# sourceMappingURL=bh-label.js.map
+
+//# sourceMappingURL=bh-label.js.map

package/components/bh-label.js.map

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

package/components/bh-loader-spinner.d.ts

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

package/components/bh-loader-spinner.js

@@ -0,0 +1,9 @@
+import { B as BhLoaderSpinner$1, d as defineCustomElement$1 } from './p-Bbo_Dwmk.js';
+
+const BhLoaderSpinner = BhLoaderSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhLoaderSpinner, defineCustomElement };
+//# sourceMappingURL=bh-loader-spinner.js.map
+
+//# sourceMappingURL=bh-loader-spinner.js.map

package/components/bh-loader-spinner.js.map

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