@diniz/webcomponents 1.1.6 → 1.1.7

package/dist/webcomponents.es.js

@@ -1,1914 +1,33 @@
-var A = Object.defineProperty;
-var C = (l, a, t) => a in l ? A(l, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[a] = t;
-var u = (l, a, t) => C(l, typeof a != "symbol" ? a + "" : a, t);
-import w from "feather-icons";
-function y(l) {
-  let a = l;
-  const t = /* @__PURE__ */ new Set();
-  return {
-    get: () => a,
-    set: (e) => {
-      Object.is(a, e) || (a = e, t.forEach((s) => s(a)));
-    },
-    subscribe: (e) => (t.add(e), () => t.delete(e))
-  };
-}
-class g extends HTMLElement {
-  constructor() {
-    super();
-    u(this, "state");
-    u(this, "signalUnsubs");
-    this.attachShadow({ mode: "open" }), this.state = {}, this.signalUnsubs = /* @__PURE__ */ new Set();
-  }
-  useSignal(t) {
-    const e = y(t), s = e.subscribe(() => this.render());
-    return this.signalUnsubs.add(s), e;
-  }
-  /**
-   * Create a signal bound to a specific HTML element
-   * Automatically updates the element's textContent when the signal value changes
-   * @param elementId - The ID of the HTML element to bind to
-   * @param initial - The initial value
-   * @returns A signal that auto-updates the element
-   * 
-   * @example
-   * ```typescript
-   * private count = this.useSignalHtml('countValue', 0);
-   * 
-   * private increment() {
-   *   this.count.set(this.count.get() + 1);
-   *   // Element with id="countValue" automatically updates
-   * }
-   * ```
-   */
-  useSignalHtml(t, e) {
-    const s = y(e), i = s.subscribe((n) => {
-      var o;
-      const r = (o = this.shadowRoot) == null ? void 0 : o.getElementById(t);
-      r && (r.textContent = String(n));
-    });
-    return this.signalUnsubs.add(i), requestAnimationFrame(() => {
-      var r;
-      const n = (r = this.shadowRoot) == null ? void 0 : r.getElementById(t);
-      n && (n.textContent = String(e));
-    }), s;
-  }
-  setState(t) {
-    this.state = { ...this.state, ...t }, this.render();
-  }
-  connectedCallback() {
-    this.render();
-  }
-  disconnectedCallback() {
-    this.signalUnsubs.forEach((t) => t()), this.signalUnsubs.clear();
-  }
-  render() {
-  }
-}
-const f = ':root{--color-primary: #24ec71;--color-primary-contrast: #ffffff;--color-ink: #0f172a;--color-muted: #f1f5f9;--color-header: #34a8eb;--color-border: #f3f5f7;--color-border-strong: #cbd5f5;--color-nav-bg: #222222;--color-nav-text: #ffffff;--shadow-primary: 0 8px 18px rgba(31, 111, 235, .25);--focus-ring: #9ec5ff;--radius-pill: 999px;--radius-md: 12px;--color-page-bg: #ffffff;--color-page-text: #0f172a}body{background:var(--color-page-bg);color:var(--color-page-text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}:host([data-ui="button"]){display:inline-block}:host([data-ui="table"]){display:block}:host([data-ui="layout"]){display:block}:host([data-ui="sidebar"]){display:block}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.95rem;font-weight:600;gap:.5rem;line-height:1;padding:.65rem 1.2rem;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn.primary{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:var(--shadow-primary)}.btn.secondary{background:var(--color-muted);color:var(--color-ink);border-color:var(--color-border-strong)}.btn.ghost{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}.btn-danger:hover{background:#6626dc;border-color:#dc2626}.btn.has-icon{line-height:1.2}.btn .btn-icon{width:18px;height:18px;flex-shrink:0}.btn .btn-icon svg{width:100%;height:100%}.btn.icon-only{padding:.65rem;aspect-ratio:1}.btn.icon-only.sm{padding:.45rem}.btn.icon-only.lg{padding:.8rem}.btn.sm .btn-icon{width:14px;height:14px}.btn.lg .btn-icon{width:22px;height:22px}.btn.sm{font-size:.85rem;padding:.45rem .9rem;box-shadow:0 4px 12px #a7124426}.btn.md{font-size:.95rem;padding:.65rem 1.2rem}.btn.lg{font-size:1.05rem;padding:.8rem 1.5rem}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--color-header)}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.95rem;border-right:1px solid var(--color-border)}tr:last-child td{border-bottom:none}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.actions-cell{display:flex;gap:.5rem;justify-content:center}.app-nav{padding:1rem;background:var(--color-nav-bg);color:var(--color-nav-text)}.app-link{color:var(--color-nav-text);margin-right:1rem;text-decoration:none}.signal-demo,.theme-toggle{margin-top:16px;display:flex;align-items:center;gap:12px}.data-table{margin-top:15px}.dashboard-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px}.dashboard-sidebar{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px}.sidebar-title{margin:0 0 12px;font-size:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-link{color:var(--color-ink);text-decoration:none;font-weight:600}.dashboard-main{display:flex;flex-direction:column;gap:12px}.dashboard-actions{display:flex;flex-wrap:wrap;gap:12px}@media (max-width: 900px){.dashboard-layout{grid-template-columns:1fr}}:host([data-ui="input"]){display:block}.input-wrapper{display:flex;flex-direction:column;gap:.35rem}.input-label{font-size:.9rem;font-weight:600;color:var(--color-ink)}.input-field{padding:.6rem .85rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-page-bg);color:var(--color-page-text);transition:border-color .15s ease,box-shadow .15s ease;outline:none}.input-field::placeholder{color:#94a3b8}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec7126}.input-field:disabled{background:var(--color-muted);cursor:not-allowed;opacity:.7}.input-wrapper.invalid .input-field{border-color:#ef4444}.input-wrapper.invalid .input-field:focus{box-shadow:0 0 0 3px #ef444426}.input-error{font-size:.8rem;color:#ef4444;display:flex;align-items:center;gap:.25rem}.input-error.hidden{display:none}:host([data-ui="checkbox"]){display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}:host([data-ui="checkbox"][disabled]){cursor:not-allowed;opacity:.6}.checkbox-container{display:inline-flex;align-items:center;gap:.75rem}.checkbox-box{position:relative;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--color-border, #cbd5e1);border-radius:var(--radius-sm, 4px);background:#fff;transition:all .2s;flex-shrink:0;box-sizing:border-box}.checkbox-box.size-sm{min-width:16px;max-width:16px;min-height:16px;max-height:16px}.checkbox-box.size-md{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.checkbox-box.size-lg{min-width:20px;max-width:20px;min-height:20px;max-height:20px}.checkbox-box:hover:not(.disabled){border-color:var(--color-primary, #24ec71)}.checkbox-box.checked,.checkbox-box.indeterminate{background:var(--color-primary, #24ec71);border-color:var(--color-primary, #24ec71)}.checkbox-box.disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed}.checkbox-icon{display:none;color:#fff;position:absolute}.checkbox-box.checked .checkbox-icon.check,.checkbox-box.indeterminate .checkbox-icon.minus{display:block}.checkbox-icon.check{width:12px;height:12px}.checkbox-icon.minus{width:10px;height:10px}.checkbox-label{font-size:.95rem;color:var(--color-ink, #0f172a);line-height:1.5}.checkbox-container.size-sm .checkbox-label{font-size:.875rem}.checkbox-container.size-lg .checkbox-label{font-size:1rem}input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;animation:fadeIn .2s ease-out}.modal-backdrop.open{display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:var(--color-surface, white);border-radius:var(--radius-lg, 16px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;width:100%;animation:slideUp .2s ease-out}.modal-content.sm{max-width:400px}.modal-content.md{max-width:600px}.modal-content.lg{max-width:800px}.modal-content.xl{max-width:1200px}.modal-content.full{max-width:95vw}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:1.25rem;font-weight:600;color:var(--color-ink, #0f172a);margin:0}.modal-close{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 8px);color:var(--color-text-muted, #64748b);transition:all .2s}.modal-close:hover{background:var(--color-muted, #f1f5f9);color:var(--color-ink, #0f172a)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1.5rem;border-top:1px solid var(--color-border, #e2e8f0);display:flex;gap:.75rem;justify-content:flex-end}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="select"]){display:block;width:90%}.select-container{position:relative;width:100%}.select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--color-ink, #0f172a)}.select-trigger{width:100%;padding:.625rem 1rem;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;font-size:.95rem;color:var(--color-ink, #0f172a)}.select-trigger:hover:not(:disabled){border-color:var(--color-primary, #24ec71)}.select-trigger:focus{outline:none;border-color:var(--color-primary, #24ec71);box-shadow:0 0 0 3px #24ec711a}.select-trigger:disabled{background:var(--color-muted, #f1f5f9);cursor:not-allowed;opacity:.6}.select-trigger.open{border-color:var(--color-primary, #24ec71)}.select-placeholder{color:var(--color-text-muted, #94a3b8);flex:1;text-align:left}.select-placeholder.has-selection{color:var(--color-ink, #0f172a)}.select-arrow{display:flex;transition:transform .2s;color:var(--color-text-muted, #64748b)}.select-arrow.open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid var(--color-border, #e2e8f0);border-radius:var(--radius-md, 8px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:300px;overflow-y:auto;z-index:1000;display:none;animation:slideDown .15s ease-out}.select-dropdown.open{display:block}.select-search{width:100%;padding:.625rem 1rem;border:none;border-bottom:1px solid var(--color-border, #e2e8f0);font-size:.95rem;outline:none}.select-search:focus{background:var(--color-muted, #f1f5f9)}.select-option{padding:.625rem 1rem;cursor:pointer;transition:background .15s;color:var(--color-ink, #0f172a);font-size:.95rem}.select-option:hover:not(.disabled){background:var(--color-muted, #f1f5f9)}.select-option.selected{background:#24ec711a;color:var(--color-primary, #24ec71);font-weight:500}.select-option.disabled{opacity:.5;cursor:not-allowed}.select-empty{padding:1rem;text-align:center;color:var(--color-text-muted, #94a3b8);font-size:.875rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([data-ui="upload"]){display:block;width:100%}.upload{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.9rem;font-weight:700;color:var(--color-ink)}.upload-drop{border:1.5px dashed rgba(36,236,113,.55);border-radius:16px;background:linear-gradient(135deg,#24ec7114,#34a8eb14);padding:1.25rem 1.5rem;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.upload-drop.dragging{border-color:var(--color-primary);box-shadow:0 16px 30px #24ec712e;transform:translateY(-2px)}.upload-drop.disabled{opacity:.6;cursor:not-allowed}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-content{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center}.upload-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#0f172a;color:#fff;box-shadow:0 12px 20px #0f172a2e}.upload-icon svg{width:20px;height:20px}.upload-title{font-weight:700;color:var(--color-ink)}.upload-sub{font-size:.85rem;color:var(--color-text-muted, #64748b);margin-top:.2rem}.upload-btn{border:none;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;background:#0f172a;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 16px #0f172a2e}.upload-btn:disabled{cursor:not-allowed;opacity:.5}.upload-helper{font-size:.85rem;color:var(--color-text-muted, #64748b)}.upload-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}.upload-list li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .75rem;border-radius:12px;background:#fff;border:1px solid rgba(148,163,184,.35);font-size:.9rem;color:var(--color-ink)}.upload-meta{font-size:.78rem;color:var(--color-text-muted, #64748b)}.upload-remove{border:none;background:#ef44441a;color:#b91c1c;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;cursor:pointer}.upload-remove:hover{background:#ef444433}:host([data-ui="pagination"]){display:block}.pagination-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.pagination-info{font-size:.9rem;color:var(--color-ink);opacity:.7}.pagination{display:flex;align-items:center;gap:.25rem}.page-btn{min-width:2.5rem;height:2.5rem;padding:.5rem;border:1px solid var(--color-border);background:#fff;color:var(--color-ink);font-size:.9rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled):not(.active){background:var(--color-muted);border-color:var(--color-border-strong)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-btn.active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);font-weight:600}.page-btn.ellipsis{border:none;background:transparent;cursor:default;pointer-events:none}.nav-btn{padding:.5rem .75rem}.nav-btn svg{width:16px;height:16px}:host([data-ui="stepper"]){display:block}.stepper-wrap{width:100%}.stepper-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted, #64748b);text-align:center;font-size:.9rem}.stepper{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.25rem}.stepper.vertical{flex-direction:column;gap:1rem}.step{display:flex;align-items:center;position:relative}.stepper.vertical .step{flex-direction:column;align-items:flex-start}.step-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit;color:var(--color-ink)}.step-trigger:disabled{cursor:not-allowed;opacity:.5}.step-node{width:2.1rem;height:2.1rem;border-radius:12px;background:var(--color-muted);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--color-ink);box-shadow:inset 0 0 0 1px #fff9}.step-text{display:flex;flex-direction:column;gap:.2rem}.step-title{font-weight:700;letter-spacing:.2px;font-size:.98rem}.step-desc{font-size:.85rem;color:var(--color-text-muted, #64748b)}.step-connector{width:48px;height:2px;margin:0 .65rem;background:linear-gradient(90deg,var(--color-border),rgba(255,255,255,0));flex-shrink:0}.stepper.vertical .step-connector{width:2px;height:28px;margin:.65rem 0 .25rem 1.05rem;background:linear-gradient(180deg,var(--color-border),rgba(255,255,255,0))}.step.complete .step-node{background:linear-gradient(135deg,#24ec71,#34a8eb);color:#0f172a;border-color:transparent;box-shadow:0 8px 18px #24ec7140}.step.complete .step-connector{background:linear-gradient(90deg,#24ec71,#34a8eb)}.stepper.vertical .step.complete .step-connector{background:linear-gradient(180deg,#24ec71,#34a8eb)}.step.active .step-node{background:#fff;color:var(--color-ink);border-color:var(--color-primary);box-shadow:0 0 0 4px #24ec712e,0 12px 20px #24ec7138;animation:stepGlow 1.6s ease-in-out infinite}.step.active .step-title{color:var(--color-ink)}.step.upcoming .step-title{color:var(--color-ink);opacity:.7}.step.error .step-node{background:#fee2e2;border-color:#f87171;color:#991b1b;box-shadow:0 8px 16px #ef444433}.step.warning .step-node{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 8px 16px #f59e0b33}.stepper.sm .step-node{width:1.65rem;height:1.65rem;font-size:.75rem;border-radius:10px}.stepper.sm .step-title{font-size:.9rem}.stepper.sm .step-desc{font-size:.78rem}.stepper.lg .step-node{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:14px}.stepper.lg .step-title{font-size:1.1rem}.stepper.lg .step-desc{font-size:.92rem}@keyframes stepGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}:host([data-ui="date-picker"]){display:block;width:100%}.date-picker-label{display:block;font-size:.9rem;font-weight:500;color:var(--color-ink);margin-bottom:.5rem}.date-picker-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.date-input-wrapper{position:relative;display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;transition:all .2s ease}.date-input-wrapper:hover:not(.disabled){border-color:var(--color-border-strong)}.date-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #24ec711a;outline:none}.date-input-wrapper.disabled{background:var(--color-muted);cursor:not-allowed;opacity:.6}.formatted-input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;background:transparent;color:var(--color-ink);outline:none}.formatted-input:disabled{cursor:not-allowed;color:var(--color-ink);opacity:.7}.formatted-input::placeholder{color:#94a3b8;opacity:.7}.formatted-input.invalid{color:#dc2626}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;pointer-events:none;cursor:pointer}.calendar-btn{padding:.5rem;margin-right:.5rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-ink);opacity:.6;transition:all .2s ease;border-radius:6px}.calendar-btn:hover:not(:disabled){background:var(--color-muted);opacity:1}.calendar-btn:disabled{cursor:not-allowed;opacity:.3}.calendar-icon{width:20px;height:20px}.format-label{font-size:.75rem;color:var(--color-ink);opacity:.6;padding:0 .25rem;font-weight:500}:host([data-ui="layout"]){display:block;width:100%;height:100%}.layout-container{display:flex;width:100%;height:100%;background:var(--color-bg);position:relative}:host([data-ui="layout-header"]){display:block;width:100%;flex-shrink:0}.layout-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 1px 3px #0f172a0f}:host([data-ui="layout-footer"]){display:block;width:100%;flex-shrink:0}.layout-footer{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -1px 3px #0f172a0f}:host([data-ui="layout-content"]){display:block;flex:1;overflow:auto;min-width:0}.layout-content{display:flex;flex-direction:column;width:100%;height:100%;position:relative}:host([data-ui="layout-sidebar"]){display:block;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);position:relative;overflow:hidden;height:100%}.layout-sidebar{display:flex;flex-direction:column;width:var(--sidebar-width, 240px);height:100%;background:var(--color-surface);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;border-right:1px solid var(--color-border);overflow:hidden}.layout-sidebar.collapsed{width:var(--sidebar-collapsed-width, 64px)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem 0}.sidebar-toggle{position:absolute;bottom:1rem;right:0;width:40px;height:40px;padding:0;margin-right:.7rem;background:transparent;border:1px solid var(--color-border);border-radius:8px;color:var(--color-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.sidebar-toggle:hover{background:var(--color-muted);border-color:var(--color-border-strong)}.sidebar-toggle:active{transform:scale(.95)}.toggle-icon{width:18px;height:18px;transition:transform .3s ease}.layout-sidebar.collapsed .toggle-icon{transform:rotate(180deg)}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:var(--color-ink);opacity:.6}@media (max-width: 768px){.layout-header,.layout-footer{padding:0 1rem}.layout-sidebar{position:absolute;left:0;top:0;height:100%;z-index:1000;box-shadow:2px 0 8px #0f172a26;transition:transform .3s cubic-bezier(.4,0,.2,1)}.layout-sidebar.collapsed{transform:translate(calc(-1 * var(--sidebar-width, 240px)))}}#ui-datepicker-div,.datepicker,.react-datepicker-popper{z-index:99999!important}';
-class E extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "button"), super.connectedCallback(), this.attachClickHandler();
-  }
-  static get observedAttributes() {
-    return ["variant", "size", "disabled", "type", "icon", "icon-position"];
-  }
-  attributeChangedCallback() {
-    this.render(), this.attachClickHandler();
-  }
-  attachClickHandler() {
-    if (!this.shadowRoot) return;
-    const a = this.shadowRoot.querySelector("button");
-    if (!a) return;
-    const t = a._clickHandler;
-    t && a.removeEventListener("click", t);
-    const e = (s) => {
-      const i = this.getType();
-      if (this.hasAttribute("disabled")) {
-        s.preventDefault(), s.stopPropagation();
-        return;
-      }
-      if (i === "submit") {
-        s.preventDefault(), s.stopPropagation();
-        let r = this.closest("form");
-        if (!r) {
-          let o = this.parentElement;
-          for (; o; ) {
-            if (o.tagName === "FORM") {
-              r = o;
-              break;
-            }
-            o = o.parentElement;
-          }
-        }
-        if (r) {
-          const o = new Event("submit", {
-            bubbles: !0,
-            cancelable: !0
-          });
-          r.dispatchEvent(o);
-        }
-      }
-    };
-    a._clickHandler = e, a.addEventListener("click", e);
-  }
-  getVariant() {
-    const a = this.getAttribute("variant");
-    return a === "secondary" || a === "ghost" || a === "danger" ? a : "primary";
-  }
-  getSize() {
-    const a = this.getAttribute("size");
-    return a === "sm" || a === "lg" ? a : "md";
-  }
-  getType() {
-    return this.getAttribute("type") ?? "button";
-  }
-  getIcon() {
-    var s;
-    const a = this.getAttribute("icon");
-    if (!a) return null;
-    const t = a.trim();
-    return { html: `<span class="btn-icon">${((s = w.icons[t]) == null ? void 0 : s.toSvg()) || ""}</span>`, name: t };
-  }
-  getIconPosition() {
-    return this.getAttribute("icon-position") === "right" ? "right" : "left";
-  }
-  render() {
-    const a = this.getVariant(), t = this.getSize(), e = this.hasAttribute("disabled"), s = this.getType(), i = this.getIcon(), n = this.getIconPosition(), r = i !== null, o = i ? i.html : "", c = this.innerHTML.trim(), d = r && !c;
-    let p;
-    r && c ? p = n === "left" ? `${o}<span>${c}</span>` : `<span>${c}</span>${o}` : r ? p = o : p = c, this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<button
-				part="button"
-				class="btn ${a} ${t}${r ? " has-icon" : ""}${d ? " icon-only" : ""}"
-				type="${s}"
-				${e ? "disabled" : ""}
-			>
-				${p}
-		</button>
-	`;
-  }
-}
-customElements.define("ui-button", E);
-class S extends g {
-  constructor() {
-    super();
-    u(this, "inputEl", null);
-    u(this, "customValidator", null);
-    u(this, "validationRule", null);
-    this.state = {
-      value: "",
-      valid: !0,
-      touched: !1,
-      error: ""
-    };
-  }
-  static get observedAttributes() {
-    return ["type", "label", "placeholder", "required", "pattern", "minlength", "maxlength", "min", "max", "error-message", "custom-error", "disabled", "name", "validate"];
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "input"), super.connectedCallback();
-  }
-  attributeChangedCallback(t, e, s) {
-    e !== s && t !== "value" && this.render();
-  }
-  setCustomValidator(t) {
-    this.customValidator = t, this.validate();
-  }
-  get value() {
-    return this.state.value;
-  }
-  set value(t) {
-    this.state.value = t, this.inputEl && this.inputEl.value !== t && (this.inputEl.value = t), this.validate();
-  }
-  get isValid() {
-    return this.state.valid;
-  }
-  checkValidity() {
-    return this.state.touched = !0, this.validate();
-  }
-  reportValidity() {
-    this.state.touched = !0;
-    const t = this.validate();
-    return this.updateErrorDisplay(), !t && this.inputEl && this.inputEl.focus(), t;
-  }
-  getType() {
-    const t = this.getAttribute("type");
-    return ["text", "email", "password", "number", "tel", "url"].includes(t || "") ? t : "text";
-  }
-  getLabel() {
-    return this.getAttribute("label") || "";
-  }
-  getPlaceholder() {
-    return this.getAttribute("placeholder") || "";
-  }
-  getName() {
-    return this.getAttribute("name") || "";
-  }
-  getErrorMessage() {
-    return this.state.error ? this.state.error : this.getAttribute("error-message") || this.getAttribute("custom-error") || "";
-  }
-  getCustomError() {
-    return this.getAttribute("custom-error") || "";
-  }
-  parseValidationRule(t) {
-    return t.startsWith("email:") ? { type: "emailDomain", domain: t.slice(6) } : t.startsWith("match:") ? { type: "match", selector: t.slice(6) } : t.startsWith("min:") ? { type: "minLength", length: parseInt(t.slice(4), 10) } : t.startsWith("max:") ? { type: "maxLength", length: parseInt(t.slice(4), 10) } : t.startsWith("regex:") ? { type: "regex", pattern: t.slice(6) } : null;
-  }
-  applyValidationRule(t) {
-    const e = this.state.value;
-    switch (t.type) {
-      case "emailDomain":
-        if (!e.endsWith(`@${t.domain}`))
-          return { valid: !1, message: `Must end with @${t.domain}` };
-        break;
-      case "match":
-        const s = document.querySelector(t.selector);
-        if (s && e !== s.value)
-          return { valid: !1, message: "Values do not match" };
-        break;
-      case "minLength":
-        if (e.length < t.length)
-          return { valid: !1, message: `Must be at least ${t.length} characters` };
-        break;
-      case "maxLength":
-        if (e.length > t.length)
-          return { valid: !1, message: `Must be no more than ${t.length} characters` };
-        break;
-      case "regex":
-        try {
-          if (!new RegExp(t.pattern).test(e))
-            return { valid: !1, message: "Invalid format" };
-        } catch {
-          return { valid: !1, message: "Invalid validation pattern" };
-        }
-        break;
-    }
-    return { valid: !0 };
-  }
-  validate() {
-    if (!this.inputEl) return !0;
-    const t = this.getAttribute("validate");
-    if (t && (this.validationRule || (this.validationRule = this.parseValidationRule(t)), this.validationRule)) {
-      const e = this.applyValidationRule(this.validationRule);
-      return this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message), this.state.valid;
-    }
-    if (this.customValidator) {
-      const e = this.customValidator(this.state.value, this.inputEl);
-      this.state.valid = e.valid, !e.valid && e.message && (this.state.error = e.message);
-    } else {
-      const e = this.inputEl.checkValidity();
-      this.state.valid = e, !e && this.state.touched && (this.state.error = this.inputEl.validationMessage || this.getErrorMessage()), e && (this.state.error = "");
-    }
-    return this.state.valid;
-  }
-  handleInput(t) {
-    const e = t.target;
-    this.state.value = e.value, this.state.touched = !0, this.validate(), this.updateErrorDisplay();
-  }
-  handleBlur() {
-    this.state.touched = !0, this.validate(), this.updateErrorDisplay();
-  }
-  updateErrorDisplay() {
-    if (!this.inputEl) return;
-    const t = this.shadowRoot.querySelector(".input-error"), e = this.shadowRoot.querySelector(".input-wrapper"), s = this.getName();
-    e && e.classList.toggle("invalid", !this.state.valid && this.state.touched), t && (!this.state.valid && this.state.touched && this.state.error ? (t.textContent = this.state.error, t.classList.remove("hidden")) : t.classList.add("hidden")), this.inputEl.setAttribute("aria-invalid", String(!this.state.valid && this.state.touched)), s && this.inputEl.setAttribute("aria-describedby", `${s}-error`);
-  }
-  needsRender() {
-    return this.hasAttribute("type") || this.hasAttribute("label") || this.hasAttribute("placeholder") || this.hasAttribute("required") || this.hasAttribute("pattern") || this.hasAttribute("disabled") || this.hasAttribute("name") || this.hasAttribute("minlength") || this.hasAttribute("maxlength") || this.hasAttribute("min") || this.hasAttribute("max") || this.hasAttribute("error-message") || this.hasAttribute("custom-error") || this.hasAttribute("validate");
-  }
-  render() {
-    const t = this.getType(), e = this.getLabel(), s = this.getPlaceholder(), i = this.getName(), n = this.getErrorMessage(), r = this.hasAttribute("required"), o = this.getAttribute("pattern"), c = this.getAttribute("minlength"), d = this.getAttribute("maxlength"), p = this.getAttribute("min"), h = this.getAttribute("max"), b = this.hasAttribute("disabled"), m = !this.state.valid && this.state.touched, v = e !== "";
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="input-wrapper${m ? " invalid" : ""}${b ? " disabled" : ""}">
-				${v ? `<label class="input-label">${e}${r ? " *" : ""}</label>` : ""}
-				<input
-					part="input"
-					class="input-field"
-					type="${t}"
-					placeholder="${s}"
-					name="${i}"
-					.value="${this.state.value}"
-					${r ? "required" : ""}
-					${o ? `pattern="${o}"` : ""}
-					${c ? `minlength="${c}"` : ""}
-					${d ? `maxlength="${d}"` : ""}
-					${p ? `min="${p}"` : ""}
-					${h ? `max="${h}"` : ""}
-					${b ? "disabled" : ""}
-					aria-invalid="${m}"
-					aria-describedby="${i}-error"
-				/>
-				<span class="input-error${m && n ? "" : " hidden"}" id="${i}-error" role="alert">${n}</span>
-			</div>
-		`, this.inputEl = this.shadowRoot.querySelector(".input-field"), this.inputEl && (this.inputEl.addEventListener("input", this.handleInput.bind(this)), this.inputEl.addEventListener("blur", this.handleBlur.bind(this)));
-  }
-}
-customElements.define("ui-input", S);
-class L extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "columns", []);
-    u(this, "rows", []);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "table"), super.connectedCallback();
-  }
-  set data(t) {
-    this.columns = t.columns, this.rows = t.rows, this.render();
-  }
-  get data() {
-    return { columns: this.columns, rows: this.rows };
-  }
-  render() {
-    const t = this.columns.filter((i) => i.visible !== !1), e = t.map(
-      (i) => `<th class="align-${i.align ?? "left"}">${i.label}</th>`
-    ).join(""), s = this.rows.map(
-      (i, n) => `<tr data-row-index="${n}">${t.map(
-        (r) => r.actions ? `<td class="align-center actions-cell">
-										${r.actions.edit ? `<ui-button variant="primary" class='action-btn' icon='edit' size="sm" data-action="edit" data-row-index="${n}">Edit</ui-button>` : ""}
-										${r.actions.delete ? `<ui-button variant="danger" class='action-btn' icon='trash' size="sm" data-action="delete" data-row-index="${n}">Delete</ui-button>` : ""}
-									</td>` : `<td class="align-${r.align ?? "left"}">${String(
-          i[r.key] ?? ""
-        )}</td>`
-      ).join("")}</tr>`
-    ).join("");
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="table-wrap">
-				<table>
-					<thead><tr>${e}</tr></thead>
-					<tbody>${s}</tbody>
-				</table>
-			</div>
-		`, this.shadowRoot.querySelectorAll(".action-btn").forEach((i) => {
-      i.addEventListener("click", (n) => {
-        const r = n.currentTarget, o = r.dataset.action, c = parseInt(r.dataset.rowIndex || "0", 10), d = o === "edit" ? "edit-action" : "delete-action";
-        this.dispatchEvent(new CustomEvent(d, {
-          bubbles: !0,
-          composed: !0,
-          detail: { row: this.rows[c], rowIndex: c }
-        }));
-      });
-    });
-  }
-}
-customElements.define("ui-table", L);
-class z extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "inputElement", null);
-    u(this, "isConnected", !1);
-    u(this, "isInternalUpdate", !1);
-    u(this, "hasRendered", !1);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
-  }
-  static get observedAttributes() {
-    return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
-  }
-  attributeChangedCallback(t, e, s) {
-    if (!(!this.isConnected || e === s)) {
-      if (this.isInternalUpdate && t === "value") {
-        this.isInternalUpdate = !1;
-        return;
-      }
-      t === "value" ? this.updateInputValues() : this.render();
-    }
-  }
-  updateInputValues() {
-    if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]');
-    if (t && e) {
-      const s = this.getValue(), i = this.getFormat(), n = this.formatDate(s, i);
-      t.value = n, e.value = s;
-    }
-  }
-  getFormat() {
-    const t = this.getAttribute("format");
-    return t === "DD/MM/YYYY" || t === "MM/DD/YYYY" || t === "DD-MM-YYYY" || t === "MM-DD-YYYY" ? t : "YYYY-MM-DD";
-  }
-  getValue() {
-    return this.getAttribute("value") || "";
-  }
-  getMin() {
-    return this.getAttribute("min") || "";
-  }
-  getMax() {
-    return this.getAttribute("max") || "";
-  }
-  getPlaceholder() {
-    return this.getAttribute("placeholder") || this.getFormat();
-  }
-  getLabel() {
-    return this.getAttribute("label") || "";
-  }
-  isDisabled() {
-    return this.hasAttribute("disabled");
-  }
-  /**
-   * Convert date from ISO format (YYYY-MM-DD) to specified format
-   */
-  formatDate(t, e) {
-    if (!t) return "";
-    const s = t.split("-");
-    if (s.length !== 3) return t;
-    const [i, n, r] = s;
-    switch (e) {
-      case "DD/MM/YYYY":
-        return `${r}/${n}/${i}`;
-      case "MM/DD/YYYY":
-        return `${n}/${r}/${i}`;
-      case "DD-MM-YYYY":
-        return `${r}-${n}-${i}`;
-      case "MM-DD-YYYY":
-        return `${n}-${r}-${i}`;
-      case "YYYY-MM-DD":
-      default:
-        return t;
-    }
-  }
-  /**
-   * Convert date from specified format to ISO format (YYYY-MM-DD)
-   */
-  parseDate(t, e) {
-    if (!t) return "";
-    let s, i, n, r;
-    switch (e) {
-      case "DD/MM/YYYY":
-        if (s = t.split("/"), s.length !== 3) return "";
-        [r, n, i] = s;
-        break;
-      case "MM/DD/YYYY":
-        if (s = t.split("/"), s.length !== 3) return "";
-        [n, r, i] = s;
-        break;
-      case "DD-MM-YYYY":
-        if (s = t.split("-"), s.length !== 3) return "";
-        [r, n, i] = s;
-        break;
-      case "MM-DD-YYYY":
-        if (s = t.split("-"), s.length !== 3) return "";
-        [n, r, i] = s;
-        break;
-      case "YYYY-MM-DD":
-      default:
-        return t;
-    }
-    return n = n.padStart(2, "0"), r = r.padStart(2, "0"), `${i}-${n}-${r}`;
-  }
-  attachEventListeners() {
-    if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector(".formatted-input"), e = this.shadowRoot.querySelector('input[type="date"]'), s = this.shadowRoot.querySelector(".calendar-btn");
-    if (!t || !e) return;
-    const i = () => {
-      const n = t.value, r = this.getFormat(), o = this.parseDate(n, r);
-      this.isValidDate(o) ? (e.value = o, t.classList.remove("invalid"), this.dispatchDateChange(o)) : n === "" ? (e.value = "", t.classList.remove("invalid"), this.dispatchDateChange("")) : t.classList.add("invalid");
-    };
-    t.addEventListener("blur", i), t.addEventListener("keydown", (n) => {
-      n.key === "Enter" && (i(), t.blur());
-    }), e.addEventListener("change", (n) => {
-      const o = n.target.value, c = this.getFormat(), d = this.formatDate(o, c);
-      t.value = d, t.classList.remove("invalid"), this.dispatchDateChange(o);
-    }), s && s.addEventListener("click", async (n) => {
-      n.preventDefault(), n.stopPropagation(), e.style.pointerEvents = "auto";
-      try {
-        typeof e.showPicker == "function" ? e.showPicker() : (e.focus(), e.click());
-      } catch (r) {
-        console.log("Date picker error:", r), e.focus(), e.click();
-      } finally {
-        setTimeout(() => {
-          e.style.pointerEvents = "none";
-        }, 100);
-      }
-    });
-  }
-  isValidDate(t) {
-    if (!t) return !1;
-    const e = new Date(t);
-    return e instanceof Date && !isNaN(e.getTime());
-  }
-  dispatchDateChange(t) {
-    const e = this.getFormat(), s = this.formatDate(t, e);
-    this.dispatchEvent(
-      new CustomEvent("date-change", {
-        detail: {
-          value: t,
-          formattedValue: s,
-          format: e
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.isInternalUpdate = !0, this.setAttribute("value", t);
-  }
-  /**
-   * Get the current value in ISO format (YYYY-MM-DD)
-   */
-  getISOValue() {
-    return this.getValue();
-  }
-  /**
-   * Get the current value in the specified format
-   */
-  getFormattedValue() {
-    const t = this.getValue(), e = this.getFormat();
-    return this.formatDate(t, e);
-  }
-  /**
-   * Set the date value (accepts ISO format)
-   */
-  setValue(t) {
-    this.setAttribute("value", t);
-  }
-  /**
-   * Clear the date value
-   */
-  clear() {
-    this.setAttribute("value", "");
-  }
-  render() {
-    const t = this.getValue(), e = this.getFormat(), s = this.getMin(), i = this.getMax(), n = this.isDisabled(), r = this.getPlaceholder(), o = this.getLabel(), c = this.formatDate(t, e), d = o !== "";
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="date-picker-container">
-				${d ? `<label class="date-picker-label">${o}</label>` : ""}
-				<div class="date-input-wrapper ${n ? "disabled" : ""}">
-					<input
-						type="text"
-						class="formatted-input"
-						part="input"
-						value="${c}"
-						placeholder="${r}"
-						${n ? "disabled" : ""}
-					/>
-					<button 
-						class="calendar-btn" 
-						type="button"
-						${n ? "disabled" : ""}
-						title="Open calendar"
-					>
-						<svg class="calendar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-						</svg>
-					</button>
-					<input
-						type="date"
-						class="hidden-date-input"
-						value="${t}"
-						${s ? `min="${s}"` : ""}
-						${i ? `max="${i}"` : ""}
-						${n ? "disabled" : ""}
-					/>
-				</div>
-				<div class="format-label">Format: ${e}</div>
-			</div>
-		`, this.attachEventListeners(), this.hasRendered = !0;
-  }
-}
-customElements.define("ui-date-picker", z);
-class I extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "_total", 0);
-    u(this, "_currentPage", 1);
-    u(this, "_pageSize", 10);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "pagination"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["total", "current-page", "page-size"];
-  }
-  attributeChangedCallback(t, e, s) {
-    switch (t) {
-      case "total":
-        this._total = parseInt(s, 10) || 0;
-        break;
-      case "current-page":
-        this._currentPage = parseInt(s, 10) || 1;
-        break;
-      case "page-size":
-        this._pageSize = parseInt(s, 10) || 10;
-        break;
-    }
-    this.render();
-  }
-  get total() {
-    return this._total;
-  }
-  set total(t) {
-    this._total = t, this.setAttribute("total", String(t));
-  }
-  get currentPage() {
-    return this._currentPage;
-  }
-  set currentPage(t) {
-    this._currentPage = t, this.setAttribute("current-page", String(t));
-  }
-  get pageSize() {
-    return this._pageSize;
-  }
-  set pageSize(t) {
-    this._pageSize = t, this.setAttribute("page-size", String(t));
-  }
-  get totalPages() {
-    return Math.ceil(this._total / this._pageSize);
-  }
-  handlePageChange(t) {
-    t < 1 || t > this.totalPages || t === this._currentPage || (this.currentPage = t, this.dispatchEvent(
-      new CustomEvent("page-change", {
-        detail: {
-          page: t,
-          pageSize: this._pageSize,
-          total: this._total,
-          totalPages: this.totalPages
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  getPageNumbers() {
-    const t = this.totalPages, e = this._currentPage;
-    if (t <= 7)
-      return Array.from({ length: t }, (i, n) => n + 1);
-    const s = [];
-    return e <= 3 ? s.push(1, 2, 3, 4, "...", t) : e >= t - 2 ? s.push(1, "...", t - 3, t - 2, t - 1, t) : s.push(1, "...", e - 1, e, e + 1, "...", t), s;
-  }
-  render() {
-    const t = this.totalPages, e = this._currentPage, s = this.getPageNumbers(), i = (e - 1) * this._pageSize + 1, n = Math.min(e * this._pageSize, this._total);
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="pagination-container">
-				<div class="pagination-info">
-					${this._total > 0 ? `Showing ${i} to ${n} of ${this._total}` : "No results"}
-				</div>
-				${t > 1 ? `
-				<nav class="pagination" role="navigation" aria-label="Pagination">
-					<button 
-						class="page-btn nav-btn" 
-						${e === 1 ? "disabled" : ""}
-						data-page="prev"
-						aria-label="Previous page"
-					>
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-						</svg>
-					</button>
-					${s.map((r) => r === "..." ? '<button class="page-btn ellipsis" disabled>...</button>' : `
-							<button 
-								class="page-btn ${r === e ? "active" : ""}"
-								data-page="${r}"
-								aria-label="Page ${r}"
-								${r === e ? 'aria-current="page"' : ""}
-							>
-								${r}
-							</button>
-						`).join("")}
-					<button 
-						class="page-btn nav-btn" 
-						${e === t ? "disabled" : ""}
-						data-page="next"
-						aria-label="Next page"
-					>
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-						</svg>
-					</button>
-				</nav>
-				` : ""}
-			</div>
-		`, this.attachEventListeners();
-  }
-  attachEventListeners() {
-    this.shadowRoot && this.shadowRoot.addEventListener("click", (t) => {
-      const s = t.target.closest(".page-btn");
-      if (!s || s.disabled) return;
-      const i = s.dataset.page;
-      if (i === "prev")
-        this.handlePageChange(this._currentPage - 1);
-      else if (i === "next")
-        this.handlePageChange(this._currentPage + 1);
-      else if (i) {
-        const n = parseInt(i, 10);
-        isNaN(n) || this.handlePageChange(n);
-      }
-    });
-  }
-}
-customElements.define("ui-pagination", I);
-class M extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "isOpen", this.useSignal(!1));
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "modal"), super.connectedCallback(), this.setupEventListeners();
-  }
-  static get observedAttributes() {
-    return ["open"];
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "open" && e !== s && this.isOpen.set(s !== null);
-  }
-  setupEventListeners() {
-    document.addEventListener("keydown", (t) => {
-      t.key === "Escape" && this.isOpen.get() && !this.hasAttribute("no-close-on-escape") && this.close();
-    });
-  }
-  open() {
-    this.isOpen.set(!0), this.setAttribute("open", ""), this.dispatchEvent(new CustomEvent("modal-open", { bubbles: !0, composed: !0 })), document.body.style.overflow = "hidden";
-  }
-  close() {
-    this.isOpen.set(!1), this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("modal-close", { bubbles: !0, composed: !0 })), document.body.style.overflow = "";
-  }
-  handleBackdropClick(t) {
-    t.target.classList.contains("modal-backdrop") && !this.hasAttribute("no-close-on-backdrop") && this.close();
-  }
-  render() {
-    const t = this.isOpen.get(), e = this.getAttribute("title") || "", s = this.getAttribute("size") || "md";
-    this.shadowRoot.innerHTML = `
-			<style>
-				${f}
-				
-				::slotted([slot="footer"]) {
-					display: flex;
-					gap: 0.75rem;
-					width: 100%;
-					justify-content: flex-end;
-				}
-			</style>
-
-			<div class="modal-backdrop ${t ? "open" : ""}" part="backdrop">
-				<div class="modal-content ${s}" part="content" @click="${(r) => r.stopPropagation()}">
-					${e ? `
-						<div class="modal-header" part="header">
-							<h2 class="modal-title">${e}</h2>
-							<button class="modal-close" part="close" aria-label="Close modal">
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<line x1="18" y1="6" x2="6" y2="18"></line>
-									<line x1="6" y1="6" x2="18" y2="18"></line>
-								</svg>
-							</button>
-						</div>
-					` : ""}
-					
-					<div class="modal-body" part="body">
-						<slot></slot>
-					</div>
-
-					<div class="modal-footer" part="footer">
-						<slot name="footer"></slot>
-					</div>
-				</div>
-			</div>
-		`;
-    const i = this.shadowRoot.querySelector(".modal-backdrop"), n = this.shadowRoot.querySelector(".modal-close");
-    i == null || i.addEventListener("click", (r) => this.handleBackdropClick(r)), n == null || n.addEventListener("click", () => this.close());
-  }
-}
-customElements.define("ui-modal", M);
-class R extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "isOpen", this.useSignal(!1));
-    u(this, "selectedValue", this.useSignal(""));
-    u(this, "searchTerm", this.useSignal(""));
-    u(this, "options", []);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "select"), super.connectedCallback(), this.parseOptions(), this.setupClickOutside();
-  }
-  static get observedAttributes() {
-    return ["value", "disabled", "placeholder", "options"];
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "value" && e !== s && this.selectedValue.set(s || ""), t === "options" && e !== s && this.parseOptions(), this.render();
-  }
-  parseOptions() {
-    const t = this.getAttribute("options");
-    if (t)
-      try {
-        this.options = JSON.parse(t);
-      } catch (e) {
-        console.error("Invalid options JSON", e), this.options = [];
-      }
-  }
-  setupClickOutside() {
-    document.addEventListener("click", (t) => {
-      !t.composedPath().includes(this) && this.isOpen.get() && this.isOpen.set(!1);
-    });
-  }
-  toggleDropdown() {
-    this.hasAttribute("disabled") || (this.isOpen.set(!this.isOpen.get()), this.isOpen.get() || this.searchTerm.set(""));
-  }
-  selectOption(t) {
-    this.selectedValue.set(t), this.setAttribute("value", t), this.isOpen.set(!1), this.searchTerm.set(""), this.dispatchEvent(new CustomEvent("select-change", {
-      bubbles: !0,
-      composed: !0,
-      detail: {
-        value: t,
-        option: this.options.find((e) => e.value === t)
-      }
-    }));
-  }
-  handleSearch(t) {
-    this.searchTerm.set(t.toLowerCase());
-  }
-  getFilteredOptions() {
-    const t = this.searchTerm.get();
-    return t ? this.options.filter(
-      (e) => e.label.toLowerCase().includes(t) || e.value.toLowerCase().includes(t)
-    ) : this.options;
-  }
-  getSelectedLabel() {
-    const t = this.selectedValue.get(), e = this.options.find((s) => s.value === t);
-    return (e == null ? void 0 : e.label) || this.getAttribute("placeholder") || "Select an option";
-  }
-  render() {
-    const t = this.isOpen.get(), e = this.hasAttribute("disabled"), s = this.hasAttribute("searchable"), i = this.getAttribute("label") || "", n = this.getSelectedLabel(), r = this.getFilteredOptions(), o = this.selectedValue.get() !== "";
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-
-			<div class="select-container">
-				${i ? `<label class="select-label">${i}</label>` : ""}
-				
-				<div class="select-trigger ${t ? "open" : ""}" part="trigger" tabindex="0" ${e ? "disabled" : ""}>
-					<span class="select-placeholder ${o ? "has-selection" : ""}">${n}</span>
-					<span class="select-arrow ${t ? "open" : ""}">
-						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							<polyline points="6 9 12 15 18 9"></polyline>
-						</svg>
-					</span>
-				</div>
-
-				<div class="select-dropdown ${t ? "open" : ""}" part="dropdown">
-					${s ? `
-						<input 
-							type="text" 
-							class="select-search" 
-							placeholder="Search..."
-							part="search"
-						>
-					` : ""}
-					
-					${r.length > 0 ? r.map((h) => `
-						<div 
-							class="select-option ${h.value === this.selectedValue.get() ? "selected" : ""} ${h.disabled ? "disabled" : ""}"
-							data-value="${h.value}"
-							part="option"
-						>
-							${h.label}
-						</div>
-					`).join("") : `
-						<div class="select-empty">No options found</div>
-					`}
-				</div>
-			</div>
-		`;
-    const c = this.shadowRoot.querySelector(".select-trigger"), d = this.shadowRoot.querySelector(".select-search"), p = this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");
-    c == null || c.addEventListener("click", () => this.toggleDropdown()), c == null || c.addEventListener("keydown", (h) => {
-      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), this.toggleDropdown());
-    }), d == null || d.addEventListener("input", (h) => {
-      this.handleSearch(h.target.value);
-    }), d == null || d.addEventListener("click", (h) => h.stopPropagation()), p.forEach((h) => {
-      h.addEventListener("click", () => {
-        const b = h.getAttribute("data-value");
-        b && this.selectOption(b);
-      });
-    });
-  }
-}
-customElements.define("ui-select", R);
-class D extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "checked", this.useSignal(!1));
-    u(this, "indeterminate", this.useSignal(!1));
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "checkbox"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["checked", "disabled", "indeterminate"];
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "checked" && e !== s && this.checked.set(s !== null), t === "indeterminate" && e !== s && this.indeterminate.set(s !== null), this.render();
-  }
-  handleChange() {
-    if (this.hasAttribute("disabled")) return;
-    this.indeterminate.get() && (this.indeterminate.set(!1), this.removeAttribute("indeterminate"));
-    const t = !this.checked.get();
-    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.dispatchEvent(new CustomEvent("checkbox-change", {
-      bubbles: !0,
-      composed: !0,
-      detail: { checked: t }
-    }));
-  }
-  setChecked(t) {
-    this.checked.set(t), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.indeterminate.set(!1), this.removeAttribute("indeterminate");
-  }
-  setIndeterminate(t) {
-    this.indeterminate.set(t), t ? this.setAttribute("indeterminate", "") : this.removeAttribute("indeterminate");
-  }
-  render() {
-    const t = this.checked.get(), e = this.indeterminate.get(), s = this.hasAttribute("disabled"), i = this.getAttribute("label") || "", n = this.getAttribute("size") || "md", r = {
-      sm: "size-sm",
-      md: "size-md",
-      lg: "size-lg"
-    };
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-
-			<label class="checkbox-container ${r[n]}">
-				<input 
-					type="checkbox" 
-					${t ? "checked" : ""}
-					${s ? "disabled" : ""}
-				>
-				<div class="checkbox-box ${r[n]} ${t ? "checked" : ""} ${e ? "indeterminate" : ""} ${s ? "disabled" : ""}" part="checkbox">
-					<svg class="checkbox-icon check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-						<polyline points="20 6 9 17 4 12"></polyline>
-					</svg>
-					<svg class="checkbox-icon minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-						<line x1="5" y1="12" x2="19" y2="12"></line>
-					</svg>
-				</div>
-				${i ? `<span class="checkbox-label">${i}</span>` : "<slot></slot>"}
-			</label>
-		`;
-    const o = this.shadowRoot.querySelector(".checkbox-container");
-    o == null || o.addEventListener("click", (c) => {
-      c.preventDefault(), this.handleChange();
-    });
-  }
-}
-customElements.define("ui-checkbox", D);
-const T = ':host{display:block}.tabs{background:var(--color-page-bg);border-radius:16px;box-shadow:0 1px 3px #0000000a,0 4px 12px #00000008;overflow:hidden;position:relative}.tablist{display:flex;position:relative;padding:8px;gap:4px;background:linear-gradient(180deg,#fafafa,#f5f5f5);border-bottom:1px solid rgba(0,0,0,.04)}.tab-indicator{position:absolute;bottom:8px;height:calc(100% - 16px);background:var(--color-page-bg);border-radius:10px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}::slotted([slot="tab"]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#64748b;cursor:pointer;font:600 13px/1 DM Sans,system-ui,-apple-system,sans-serif;letter-spacing:.02em;padding:10px 18px;position:relative;transition:color .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}::slotted([slot="tab"]:hover){color:var(--color-ink)}::slotted([slot="tab"].is-active){color:var(--color-ink)}::slotted([slot="tab"]:focus-visible){outline:none}::slotted([slot="tab"]:focus-visible):after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid var(--color-primary);border-radius:8px;pointer-events:none}.panels{padding:24px 28px;min-height:200px}::slotted([slot="panel"]){animation:fadeIn .3s ease}::slotted([slot="panel"]:not(.is-active)){display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tab-indicator{transition:none}::slotted([slot="panel"]){animation:none}}';
-class Y extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "activeId", null);
-    u(this, "indicator", null);
-    u(this, "handleTabClick", (t) => {
-      const e = t.target;
-      if (!e) return;
-      const s = e.closest('[slot="tab"][data-tab]');
-      if (!s) return;
-      t.preventDefault();
-      const i = s.getAttribute("data-tab");
-      i && this.setActive(i);
-    });
-  }
-  static get observedAttributes() {
-    return ["active"];
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "tabs"), super.connectedCallback(), this.addEventListener("click", this.handleTabClick);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("click", this.handleTabClick), super.disconnectedCallback();
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "active" && e !== s && (this.activeId = s, this.syncTabs());
-  }
-  setActive(t) {
-    this.activeId !== t && (this.activeId = t, this.setAttribute("active", t), this.syncTabs(), this.dispatchEvent(new CustomEvent("tab-change", {
-      bubbles: !0,
-      composed: !0,
-      detail: { id: t }
-    })));
-  }
-  getTabs() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="tab"]');
-    return t ? t.assignedElements({ flatten: !0 }) : [];
-  }
-  getPanels() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="panel"]');
-    return t ? t.assignedElements({ flatten: !0 }) : [];
-  }
-  getActiveId(t) {
-    const e = this.getAttribute("active");
-    if (e && t.some((i) => i.getAttribute("data-tab") === e))
-      return e;
-    if (this.activeId && t.some((i) => i.getAttribute("data-tab") === this.activeId))
-      return this.activeId;
-    const s = t.find((i) => i.getAttribute("data-tab"));
-    return (s == null ? void 0 : s.getAttribute("data-tab")) ?? null;
-  }
-  syncTabs() {
-    const t = this.getTabs(), e = this.getPanels();
-    if (t.length === 0) return;
-    const s = this.getActiveId(t);
-    s && (this.activeId = s, this.getAttribute("active") !== s && this.setAttribute("active", s), t.forEach((i) => {
-      const n = i.getAttribute("data-tab");
-      if (!n) return;
-      const r = i.id || `tab-${n}`, o = n === s;
-      i.id = r, i.setAttribute("role", "tab"), i.setAttribute("aria-selected", String(o)), i.setAttribute("tabindex", o ? "0" : "-1"), i.classList.toggle("is-active", o);
-    }), e.forEach((i) => {
-      const n = i.getAttribute("data-tab");
-      if (!n) return;
-      const r = i.id || `panel-${n}`, o = n === s;
-      i.id = r, i.setAttribute("role", "tabpanel"), i.toggleAttribute("hidden", !o), i.classList.toggle("is-active", o);
-      const c = t.find((d) => d.getAttribute("data-tab") === n);
-      c && (c.setAttribute("aria-controls", r), i.setAttribute("aria-labelledby", c.id));
-    }), this.updateIndicator(t, s));
-  }
-  updateIndicator(t, e) {
-    if (!this.indicator) return;
-    const s = t.find((o) => o.getAttribute("data-tab") === e);
-    if (!s) return;
-    const i = this.shadowRoot.querySelector(".tablist");
-    if (!i) return;
-    s.getBoundingClientRect(), i.getBoundingClientRect();
-    const n = t.indexOf(s);
-    let r = 0;
-    for (let o = 0; o < n; o++)
-      r += t[o].offsetWidth;
-    this.indicator.style.transform = `translateX(${r}px)`, this.indicator.style.width = `${s.offsetWidth}px`;
-  }
-  render() {
-    this.shadowRoot.innerHTML = `
-			<style>${f}${T}</style>
-			<div class="tabs">
-				<div class="tablist" role="tablist">
-					<div class="tab-indicator"></div>
-					<slot name="tab"></slot>
-				</div>
-				<div class="panels">
-					<slot name="panel"></slot>
-				</div>
-			</div>
-		`, this.indicator = this.shadowRoot.querySelector(".tab-indicator");
-    const t = this.shadowRoot.querySelector('slot[name="tab"]'), e = this.shadowRoot.querySelector('slot[name="panel"]');
-    t == null || t.addEventListener("slotchange", () => this.syncTabs()), e == null || e.addEventListener("slotchange", () => this.syncTabs()), requestAnimationFrame(() => this.syncTabs());
-  }
-}
-customElements.define("ui-tabs", Y);
-const q = ':host{display:block;--card-transition: all .3s cubic-bezier(.4, 0, .2, 1)}:host([data-ui="card"]){display:block}.card{background:#fff;padding:24px;box-sizing:border-box;width:100%;position:relative;transition:var(--card-transition);overflow:hidden}.card.rounded{border-radius:16px}.card.square{border-radius:0}.card.default{border:1px solid #e5e7eb;background:#fff}.card.elevated{border:none;background:linear-gradient(to bottom,#fff,#fafbfc)}.card.bordered{border:2px solid #e5e7eb;background:#fff}.card.ghost{border:1px dashed #d1d5db;background:transparent}.card.default:hover{border-color:#d1d5db;transform:translateY(-2px)}.card.elevated:hover{transform:translateY(-4px)}.card.bordered:hover{border-color:#9ca3af;background:#fafbfc}.card.ghost:hover{border-color:#9ca3af;background:#f9fafb80}.card.elevated:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#6366f11a,#ec48991a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}.card.elevated:hover:before{opacity:1}.card ::slotted(*:first-child){margin-top:0}.card ::slotted(*:last-child){margin-bottom:0}.card:focus-within{outline:2px solid #9ec5ff;outline-offset:2px}@media (max-width: 768px){.card{padding:20px}.card.rounded{border-radius:12px}}@media (max-width: 480px){.card{padding:16px}.card.rounded{border-radius:10px}}@media print{.card{border:1px solid #e5e7eb;box-shadow:none!important;page-break-inside:avoid}}';
-class H extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "card"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["shadow", "shadow-color", "rounded", "variant", "elevation"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  getShadow() {
-    return this.hasAttribute("shadow") && this.getAttribute("shadow") !== "false";
-  }
-  getShadowColor() {
-    return this.getAttribute("shadow-color") ?? "0, 0, 0";
-  }
-  getRounded() {
-    return this.getAttribute("rounded") !== "false";
-  }
-  getVariant() {
-    const a = this.getAttribute("variant");
-    return a === "elevated" || a === "bordered" || a === "ghost" ? a : "default";
-  }
-  getElevation() {
-    const a = this.getAttribute("elevation");
-    return a === "none" || a === "sm" || a === "md" || a === "lg" || a === "xl" ? a : "sm";
-  }
-  render() {
-    const a = this.getShadow(), t = this.getShadowColor(), e = this.getRounded(), s = this.getVariant(), i = this.getElevation();
-    let n = "none";
-    if (a)
-      switch (i) {
-        case "sm":
-          n = `0 1px 2px rgba(${t}, 0.05), 0 1px 3px rgba(${t}, 0.1)`;
-          break;
-        case "md":
-          n = `0 4px 6px rgba(${t}, 0.07), 0 2px 4px rgba(${t}, 0.06)`;
-          break;
-        case "lg":
-          n = `0 10px 15px rgba(${t}, 0.1), 0 4px 6px rgba(${t}, 0.05)`;
-          break;
-        case "xl":
-          n = `0 20px 25px rgba(${t}, 0.15), 0 10px 10px rgba(${t}, 0.04)`;
-          break;
-        default:
-          n = "none";
-      }
-    this.shadowRoot.innerHTML = `
-      <style>
-        ${f}
-        ${q}
-        
-        .card.custom-shadow {
-          box-shadow: ${n};
-        }
-
-        .card.custom-shadow:hover {
-          box-shadow: ${a && i !== "none" ? n.replace(/rgba\(([^)]+), ([\d.]+)\)/g, (r, o, c) => `rgba(${o}, ${Math.min(parseFloat(c) * 1.3, 0.25)})`) : "none"};
-        }
-      </style>
-      <div class="card ${s} ${e ? "rounded" : "square"} ${a ? "custom-shadow" : "no-shadow"}">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-customElements.define("ui-card", H);
-const P = ":host{--toast-success: #10b981;--toast-error: #ef4444;--toast-warning: #f59e0b;--toast-info: #3b82f6;--toast-bg: rgba(255, 255, 255, .95);--toast-blur: blur(12px);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);--toast-border: rgba(255, 255, 255, .3);--toast-text: #1e293b;--toast-radius: 14px;--toast-icon-size: 20px}.toast-container{position:fixed;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:12px;max-width:420px;padding:16px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.bottom-right{bottom:0;right:0;flex-direction:column-reverse}.toast-container.bottom-left{bottom:0;left:0;flex-direction:column-reverse}.toast-container.top-center{top:0;left:50%;transform:translate(-50%)}.toast-container.bottom-center{bottom:0;left:50%;transform:translate(-50%);flex-direction:column-reverse}.toast{pointer-events:auto;background:var(--toast-bg);backdrop-filter:var(--toast-blur);-webkit-backdrop-filter:var(--toast-blur);border:1px solid var(--toast-border);border-radius:var(--toast-radius);box-shadow:var(--toast-shadow);padding:16px 20px;min-width:300px;max-width:100%;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;opacity:0;transform:translate(100px);animation:toastSlideIn .4s cubic-bezier(.16,1,.3,1) forwards}.toast.closing{animation:toastSlideOut .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-left .toast,.toast-container.bottom-left .toast{transform:translate(-100px);animation:toastSlideInLeft .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-left .toast.closing,.toast-container.bottom-left .toast.closing{animation:toastSlideOutLeft .3s cubic-bezier(.5,0,.75,0) forwards}.toast-container.top-center .toast,.toast-container.bottom-center .toast{transform:translateY(-50px);animation:toastSlideInTop .4s cubic-bezier(.16,1,.3,1) forwards}.toast-container.top-center .toast.closing,.toast-container.bottom-center .toast.closing{animation:toastSlideOutTop .3s cubic-bezier(.5,0,.75,0) forwards}.toast-icon{flex-shrink:0;width:var(--toast-icon-size);height:var(--toast-icon-size);display:flex;align-items:center;justify-content:center;margin-top:2px}.toast-icon svg{width:100%;height:100%;stroke-width:2.5}.toast.success .toast-icon{color:var(--toast-success)}.toast.error .toast-icon{color:var(--toast-error)}.toast.warning .toast-icon{color:var(--toast-warning)}.toast.info .toast-icon{color:var(--toast-info)}.toast.success:before{background:linear-gradient(135deg,var(--toast-success),rgba(16,185,129,.7))}.toast.error:before{background:linear-gradient(135deg,var(--toast-error),rgba(239,68,68,.7))}.toast.warning:before{background:linear-gradient(135deg,var(--toast-warning),rgba(245,158,11,.7))}.toast.info:before{background:linear-gradient(135deg,var(--toast-info),rgba(59,130,246,.7))}.toast-content{flex:1;min-width:0}.toast-title{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--toast-text);line-height:1.4}.toast-description{margin:0;font-size:13.5px;color:#64748b;line-height:1.5}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s ease;margin-top:2px}.toast-close:hover{background:#0000000d;color:var(--toast-text)}.toast-close svg{width:14px;height:14px;stroke-width:2.5}.toast-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;border-radius:0 0 var(--toast-radius) var(--toast-radius);overflow:hidden;background:#0000000d}.toast-progress-bar{height:100%;width:100%;transform-origin:left;animation:toastProgress var(--duration) linear forwards}.toast.success .toast-progress-bar{background:var(--toast-success)}.toast.error .toast-progress-bar{background:var(--toast-error)}.toast.warning .toast-progress-bar{background:var(--toast-warning)}.toast.info .toast-progress-bar{background:var(--toast-info)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100px) scale(.95)}}@keyframes toastSlideInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOutLeft{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-100px) scale(.95)}}@keyframes toastSlideInTop{0%{opacity:0;transform:translateY(-50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastSlideOutTop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(.95)}}@keyframes toastProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-color-scheme: dark){:host{--toast-bg: rgba(30, 41, 59, .95);--toast-border: rgba(255, 255, 255, .1);--toast-text: #f1f5f9;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2)}.toast-description{color:#94a3b8}.toast-close{color:#64748b}.toast-close:hover{background:#ffffff1a;color:var(--toast-text)}.toast-progress{background:#ffffff1a}}@media (max-width: 480px){.toast-container{max-width:calc(100vw - 32px);left:16px!important;right:16px!important;transform:none!important;padding:12px}.toast{min-width:0;width:100%}}";
-class O extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "toasts", /* @__PURE__ */ new Map());
-    u(this, "toastCounter", 0);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "toast"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["position"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  getPosition() {
-    const t = this.getAttribute("position");
-    return t === "top-left" || t === "bottom-right" || t === "bottom-left" || t === "top-center" || t === "bottom-center" ? t : "top-right";
-  }
-  getIcon(t) {
-    var i;
-    const s = {
-      success: "check-circle",
-      error: "x-circle",
-      warning: "alert-triangle",
-      info: "info"
-    }[t];
-    return ((i = w.icons[s]) == null ? void 0 : i.toSvg()) || "";
-  }
-  /**
-   * Show a toast notification
-   * @param config Toast configuration
-   * @returns Toast ID for manual dismissal
-   */
-  show(t) {
-    const {
-      title: e,
-      description: s = "",
-      type: i = "info",
-      duration: n = 5e3,
-      closable: r = !0
-    } = t, o = `toast-${++this.toastCounter}`, c = this.getIcon(i), d = document.createElement("div");
-    d.className = `toast ${i}`, d.setAttribute("role", "alert"), d.setAttribute("aria-live", "polite"), d.innerHTML = `
-      <div class="toast-icon">${c}</div>
-      <div class="toast-content">
-        <div class="toast-title">${this.escapeHtml(e)}</div>
-        ${s ? `<div class="toast-description">${this.escapeHtml(s)}</div>` : ""}
-      </div>
-      ${r ? `
-        <button class="toast-close" aria-label="Close notification">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      ` : ""}
-      ${n > 0 ? `
-        <div class="toast-progress">
-          <div class="toast-progress-bar" style="--duration: ${n}ms"></div>
-        </div>
-      ` : ""}
-    `;
-    const p = this.shadowRoot.querySelector(".toast-container");
-    if (p && p.appendChild(d), r) {
-      const b = d.querySelector(".toast-close");
-      b == null || b.addEventListener("click", () => this.dismiss(o));
-    }
-    let h;
-    return n > 0 && (h = window.setTimeout(() => {
-      this.dismiss(o);
-    }, n)), this.toasts.set(o, { element: d, timer: h }), this.dispatchEvent(
-      new CustomEvent("toast-show", {
-        bubbles: !0,
-        composed: !0,
-        detail: { id: o, ...t }
-      })
-    ), o;
-  }
-  /**
-   * Dismiss a specific toast
-   */
-  dismiss(t) {
-    const e = this.toasts.get(t);
-    e && (e.timer && clearTimeout(e.timer), e.element.classList.add("closing"), setTimeout(() => {
-      e.element.remove(), this.toasts.delete(t), this.dispatchEvent(
-        new CustomEvent("toast-dismiss", {
-          bubbles: !0,
-          composed: !0,
-          detail: { id: t }
-        })
-      );
-    }, 300));
-  }
-  /**
-   * Dismiss all toasts
-   */
-  dismissAll() {
-    Array.from(this.toasts.keys()).forEach((e) => this.dismiss(e));
-  }
-  /**
-   * Convenience methods for different toast types
-   */
-  success(t, e, s) {
-    return this.show({ title: t, description: e, type: "success", duration: s });
-  }
-  error(t, e, s) {
-    return this.show({ title: t, description: e, type: "error", duration: s });
-  }
-  warning(t, e, s) {
-    return this.show({ title: t, description: e, type: "warning", duration: s });
-  }
-  info(t, e, s) {
-    return this.show({ title: t, description: e, type: "info", duration: s });
-  }
-  escapeHtml(t) {
-    const e = document.createElement("div");
-    return e.textContent = t, e.innerHTML;
-  }
-  render() {
-    const t = this.getPosition();
-    this.shadowRoot.innerHTML = `
-      <style>
-        ${f}
-        ${P}
-      </style>
-      <div class="toast-container ${t}"></div>
-    `;
-  }
-}
-customElements.define("ui-toast", O);
-class F extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "steps", []);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "stepper"), super.connectedCallback(), this.parseSteps();
-  }
-  static get observedAttributes() {
-    return ["steps", "active", "orientation", "size"];
-  }
-  attributeChangedCallback(t, e, s) {
-    if (t === "steps" && e !== s && this.parseSteps(), t === "active" && e !== s) {
-      this.render();
-      return;
-    }
-    this.render();
-  }
-  parseSteps() {
-    const t = this.getAttribute("steps");
-    if (!t) {
-      this.steps = [];
-      return;
-    }
-    try {
-      const e = JSON.parse(t);
-      this.steps = Array.isArray(e) ? e : [];
-    } catch (e) {
-      console.error("Invalid steps JSON", e), this.steps = [];
-    }
-  }
-  getOrientation() {
-    return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
-  }
-  getSize() {
-    const t = this.getAttribute("size");
-    return t === "sm" || t === "lg" ? t : "md";
-  }
-  getActiveIndex(t) {
-    const e = parseInt(this.getAttribute("active") || "1", 10);
-    return Number.isNaN(e) || t <= 0 ? 1 : Math.min(Math.max(e, 1), t);
-  }
-  resolveState(t, e, s) {
-    return t.state ? t.state : e + 1 < s ? "complete" : e + 1 === s ? "active" : "upcoming";
-  }
-  setActive(t) {
-    const e = this.steps.length;
-    if (e === 0) return;
-    const s = Math.min(Math.max(t, 1), e);
-    if (s === this.getActiveIndex(e)) return;
-    this.setAttribute("active", String(s));
-    const i = this.steps[s - 1], n = this.resolveState(i, s - 1, s);
-    this.dispatchEvent(
-      new CustomEvent("step-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { index: s, step: i, state: n }
-      })
-    );
-  }
-  escapeHtml(t) {
-    const e = document.createElement("div");
-    return e.textContent = t, e.innerHTML;
-  }
-  render() {
-    const t = this.getOrientation(), e = this.getSize(), s = this.steps, i = s.length, n = this.getActiveIndex(i);
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="stepper-wrap">
-				${i === 0 ? '<div class="stepper-empty">No steps configured</div>' : `
-					<ol class="stepper ${t} ${e}" role="list">
-						${s.map((r, o) => {
-      const c = this.resolveState(r, o, n), d = c === "active", p = r.disabled ? "disabled" : "";
-      return `
-								<li class="step ${c} ${p}" data-state="${c}">
-									<button class="step-trigger" data-index="${o}" ${r.disabled ? "disabled" : ""} aria-current="${d ? "step" : "false"}">
-										<span class="step-node">${o + 1}</span>
-										<span class="step-text">
-											<span class="step-title">${this.escapeHtml(r.title || `Step ${o + 1}`)}</span>
-											${r.description ? `<span class="step-desc">${this.escapeHtml(r.description)}</span>` : ""}
-										</span>
-									</button>
-									${o < i - 1 ? '<span class="step-connector" aria-hidden="true"></span>' : ""}
-								</li>
-							`;
-    }).join("")}
-					</ol>
-				`}
-			</div>
-		`, this.shadowRoot.querySelectorAll(".step-trigger").forEach((r) => {
-      r.addEventListener("click", () => {
-        const o = parseInt(r.dataset.index || "0", 10);
-        Number.isNaN(o) || this.setActive(o + 1);
-      });
-    });
-  }
-}
-customElements.define("ui-stepper", F);
-class U extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "files", this.useSignal([]));
-    u(this, "isDragging", this.useSignal(!1));
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "upload"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["accept", "multiple", "disabled", "label", "helper", "name"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  get value() {
-    return this.files.get().map((t) => t.name).join(", ");
-  }
-  get filesValue() {
-    return this.files.get();
-  }
-  set filesValue(t) {
-    this.setFiles(t);
-  }
-  clear() {
-    this.setFiles([]);
-  }
-  isDisabled() {
-    return this.hasAttribute("disabled");
-  }
-  isMultiple() {
-    return this.hasAttribute("multiple");
-  }
-  getAccept() {
-    return this.getAttribute("accept") || "";
-  }
-  getLabel() {
-    return this.getAttribute("label") || "Upload files";
-  }
-  getHelper() {
-    return this.getAttribute("helper") || "";
-  }
-  setFiles(t) {
-    const e = this.isMultiple() ? t : t.slice(0, 1);
-    this.files.set(e), this.dispatchEvent(
-      new CustomEvent("upload-change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { files: e }
-      })
-    );
-  }
-  formatSize(t) {
-    if (t < 1024) return `${t} B`;
-    const e = t / 1024;
-    return e < 1024 ? `${e.toFixed(1)} KB` : `${(e / 1024).toFixed(1)} MB`;
-  }
-  syncInputFiles(t, e) {
-    const s = new DataTransfer();
-    e.forEach((i) => s.items.add(i)), t.files = s.files;
-  }
-  render() {
-    const t = this.getAccept(), e = this.getLabel(), s = this.getHelper(), i = this.isDisabled(), n = this.isMultiple(), r = this.isDragging.get(), o = this.files.get();
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="upload">
-				${e ? `<label class="upload-label">${e}</label>` : ""}
-				<div class="upload-drop ${r ? "dragging" : ""} ${i ? "disabled" : ""}" part="dropzone">
-					<input
-						class="upload-input"
-						type="file"
-						${n ? "multiple" : ""}
-						${t ? `accept="${t}"` : ""}
-						${i ? "disabled" : ""}
-					>
-					<div class="upload-content">
-						<div class="upload-icon" aria-hidden="true">
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-								<path d="M12 16V4"></path>
-								<path d="M8 8l4-4 4 4"></path>
-								<path d="M4 16v4h16v-4"></path>
-							</svg>
-						</div>
-						<div class="upload-text">
-							<div class="upload-title">Drop files here or browse</div>
-							<div class="upload-sub">
-								${t ? `Accepted: ${t}` : "Any file type supported"}
-							</div>
-						</div>
-						<button class="upload-btn" type="button" ${i ? "disabled" : ""}>Browse</button>
-					</div>
-				</div>
-				${s ? `<div class="upload-helper">${s}</div>` : ""}
-				${o.length ? `
-					<ul class="upload-list">
-						${o.map(
-      (b, m) => `
-								<li>
-									<span>${b.name}</span>
-									<span class="upload-meta">${this.formatSize(b.size)}</span>
-									<button class="upload-remove" data-index="${m}" type="button">Remove</button>
-								</li>
-							`
-    ).join("")}
-					</ul>
-				` : ""}
-			</div>
-		`;
-    const c = this.shadowRoot.querySelector(".upload-drop"), d = this.shadowRoot.querySelector(".upload-input"), p = this.shadowRoot.querySelector(".upload-btn"), h = this.shadowRoot.querySelectorAll(".upload-remove");
-    !c || !d || (o.length ? this.syncInputFiles(d, o) : d.value = "", c.addEventListener("dragover", (b) => {
-      i || (b.preventDefault(), this.isDragging.set(!0));
-    }), c.addEventListener("dragleave", () => {
-      this.isDragging.set(!1);
-    }), c.addEventListener("drop", (b) => {
-      var v;
-      if (i) return;
-      b.preventDefault(), this.isDragging.set(!1);
-      const m = Array.from(((v = b.dataTransfer) == null ? void 0 : v.files) ?? []);
-      m.length && (this.setFiles(m), this.syncInputFiles(d, this.files.get()));
-    }), d.addEventListener("change", () => {
-      const b = Array.from(d.files ?? []);
-      this.setFiles(b);
-    }), p == null || p.addEventListener("click", () => {
-      i || d.click();
-    }), h.forEach((b) => {
-      b.addEventListener("click", () => {
-        const m = parseInt(b.dataset.index || "0", 10), v = this.files.get().filter((X, $) => $ !== m);
-        this.setFiles(v), this.syncInputFiles(d, v);
-      });
-    }));
-  }
-}
-customElements.define("ui-upload", U);
-class V extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "layout"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["direction"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  getDirection() {
-    const a = this.getAttribute("direction");
-    return a === "horizontal" || a === "vertical" ? a : "auto";
-  }
-  detectDirection() {
-    const a = this.getDirection();
-    if (a !== "auto") return a;
-    const t = this.querySelector("ui-layout-header"), e = this.querySelector("ui-layout-footer");
-    return this.querySelector("ui-layout-sidebar") ? "horizontal" : "vertical";
-  }
-  render() {
-    const a = this.detectDirection() === "horizontal" ? "row" : "column";
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="layout-container" style="flex-direction: ${a}">
-				<slot></slot>
-			</div>
-		`;
-  }
-}
-class j extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "layout-header"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["height"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  getHeight() {
-    const a = this.getAttribute("height");
-    return a && /^\d+$/.test(a) ? a + "px" : a || "64px";
-  }
-  render() {
-    const a = this.getHeight();
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<header class="layout-header" style="height: ${a}">
-				<slot></slot>
-			</header>
-		`;
-  }
-}
-class N extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "layout-footer"), super.connectedCallback();
-  }
-  static get observedAttributes() {
-    return ["height"];
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  getHeight() {
-    const a = this.getAttribute("height");
-    return a && /^\d+$/.test(a) ? a + "px" : a || "56px";
-  }
-  render() {
-    const a = this.getHeight();
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<footer class="layout-footer" style="height: ${a}">
-				<slot></slot>
-			</footer>
-		`;
-  }
-}
-class _ extends g {
-  connectedCallback() {
-    this.setAttribute("data-ui", "layout-content"), super.connectedCallback();
-  }
-  render() {
-    this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<div class="layout-content">
-				<slot></slot>
-			</div>
-		`;
-  }
-}
-class B extends g {
-  constructor() {
-    super(...arguments);
-    u(this, "isCollapsed", !1);
-    u(this, "animating", !1);
-  }
-  connectedCallback() {
-    this.setAttribute("data-ui", "layout-sidebar"), super.connectedCallback(), this.isCollapsed = this.hasAttribute("collapsed"), this.render(), this.attachEventListeners();
-  }
-  static get observedAttributes() {
-    return ["collapsed", "width", "collapsed-width", "collapsible"];
-  }
-  attributeChangedCallback(t) {
-    t === "collapsed" && (this.isCollapsed = this.hasAttribute("collapsed")), this.render();
-  }
-  getWidth() {
-    const t = this.getAttribute("width");
-    return t && /^\d+$/.test(t) ? t + "px" : t || "240px";
-  }
-  getCollapsedWidth() {
-    const t = this.getAttribute("collapsed-width");
-    return t && /^\d+$/.test(t) ? t + "px" : t || "64px";
-  }
-  isCollapsible() {
-    return this.hasAttribute("collapsible");
-  }
-  attachEventListeners() {
-    if (!this.shadowRoot) return;
-    const t = this.shadowRoot.querySelector(".sidebar-toggle");
-    t && t.addEventListener("click", () => this.toggleCollapse());
-  }
-  toggleCollapse() {
-    this.animating || (this.animating = !0, this.isCollapsed = !this.isCollapsed, this.isCollapsed ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed"), this.dispatchEvent(
-      new CustomEvent("collapsed-change", {
-        detail: { collapsed: this.isCollapsed },
-        bubbles: !0,
-        composed: !0
-      })
-    ), setTimeout(() => {
-      this.animating = !1;
-    }, 300));
-  }
-  render() {
-    const t = this.getWidth(), e = this.getCollapsedWidth(), s = this.isCollapsible();
-    s && this.isCollapsed, this.shadowRoot.innerHTML = `
-			<style>${f}</style>
-			<aside class="layout-sidebar ${this.isCollapsed ? "collapsed" : ""}" 
-				style="--sidebar-width: ${t}; --sidebar-collapsed-width: ${e}">
-				<div class="sidebar-content">
-					<slot></slot>
-				</div>
-				${s ? `
-					<button class="sidebar-toggle" title="${this.isCollapsed ? "Expand" : "Collapse"}">
-						<svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-								d="M15 19l-7-7 7-7"></path>
-						</svg>
-					</button>
-				` : ""}
-			</aside>
-		`, this.attachEventListeners();
-  }
-}
-customElements.define("ui-layout", V);
-customElements.define("ui-layout-header", j);
-customElements.define("ui-layout-footer", N);
-customElements.define("ui-layout-content", _);
-customElements.define("ui-layout-sidebar", B);
-class W {
-  constructor() {
-    u(this, "baseURL", "");
-    u(this, "defaultHeaders", {
-      "Content-Type": "application/json"
-    });
-    u(this, "defaultTimeout", 3e4);
-    u(this, "interceptors", {
-      request: {
-        handlers: [],
-        use: (a, t) => {
-          this.interceptors.request.handlers.push({ onFulfilled: a, onRejected: t });
-        }
-      },
-      response: {
-        handlers: [],
-        use: (a, t) => {
-          this.interceptors.response.handlers.push({ onFulfilled: a, onRejected: t });
-        }
-      }
-    });
-  }
-  /**
-   * Set base URL for all requests
-   */
-  setBaseURL(a) {
-    this.baseURL = a;
-  }
-  /**
-   * Get currently set base URL
-   */
-  getBaseURL() {
-    return this.baseURL;
-  }
-  /**
-   * Set default headers for all requests
-   */
-  setDefaultHeaders(a) {
-    this.defaultHeaders = { ...this.defaultHeaders, ...a };
-  }
-  /**
-   * Set default timeout for all requests (in ms)
-   */
-  setDefaultTimeout(a) {
-    this.defaultTimeout = a;
-  }
-  /**
-   * Execute request with interceptors
-   */
-  async executeRequest(a, t) {
-    const e = a.startsWith("http") ? a : this.baseURL + a;
-    let s = {
-      method: "GET",
-      headers: { ...this.defaultHeaders },
-      timeout: this.defaultTimeout,
-      ...t
-    };
-    for (const r of this.interceptors.request.handlers)
-      try {
-        s = await r.onFulfilled(s);
-      } catch (o) {
-        if (r.onRejected)
-          s = await r.onRejected(o);
-        else
-          throw o;
-      }
-    const i = new AbortController(), n = setTimeout(() => i.abort(), s.timeout || this.defaultTimeout);
-    try {
-      const r = {
-        method: s.method,
-        headers: s.headers,
-        signal: i.signal
-      };
-      s.body && s.method !== "GET" && (r.body = (typeof s.body == "string", s.body));
-      const o = await fetch(e, r);
-      let c;
-      const d = o.headers.get("content-type");
-      d != null && d.includes("application/json") ? c = o.ok ? await o.json() : null : d != null && d.includes("text") ? c = await o.text() : c = await o.blob();
-      let p = {
-        status: o.status,
-        statusText: o.statusText,
-        headers: o.headers,
-        data: c
-      };
-      if (!o.ok) {
-        const h = new Error(`HTTP ${o.status}: ${o.statusText}`);
-        throw h.response = p, h.config = s, h;
-      }
-      for (const h of this.interceptors.response.handlers)
-        try {
-          p = await h.onFulfilled(p);
-        } catch (b) {
-          if (h.onRejected)
-            p = await h.onRejected(b);
-          else
-            throw b;
-        }
-      return p.data;
-    } catch (r) {
-      throw r instanceof Error && r.name === "AbortError" ? new Error(`Request timeout after ${s.timeout}ms`) : r;
-    } finally {
-      clearTimeout(n);
-    }
-  }
-  /**
-   * GET request
-   */
-  async get(a, t) {
-    return this.executeRequest(a, { ...t, method: "GET" });
-  }
-  /**
-   * POST request
-   */
-  async post(a, t, e) {
-    return this.executeRequest(a, {
-      ...e,
-      method: "POST",
-      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
-    });
-  }
-  /**
-   * PUT request
-   */
-  async put(a, t, e) {
-    return this.executeRequest(a, {
-      ...e,
-      method: "PUT",
-      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
-    });
-  }
-  /**
-   * PATCH request
-   */
-  async patch(a, t, e) {
-    return this.executeRequest(a, {
-      ...e,
-      method: "PATCH",
-      body: typeof t == "string" || t instanceof FormData ? t : JSON.stringify(t)
-    });
-  }
-  /**
-   * DELETE request
-   */
-  async delete(a, t) {
-    return this.executeRequest(a, { ...t, method: "DELETE" });
-  }
-  /**
-   * HEAD request
-   */
-  async head(a, t) {
-    return this.executeRequest(a, { ...t, method: "HEAD" });
-  }
-}
-const Z = new W();
-function x(l, a) {
-  return l ? l.querySelector(a) : null;
-}
-function tt(l, a) {
-  return l ? l.querySelectorAll(a) : [];
-}
-function et(l, a) {
-  return l ? l.querySelector(`#${a}`) : null;
-}
-function st(l, a, t, e, s) {
-  if (!l) return null;
-  const i = l.querySelector(`#${a}`);
-  return i ? (i.addEventListener(t, e, s), i) : null;
-}
-function at(l, a) {
-  return x(l, a);
-}
-function rt(l, a) {
-  return x(l, a);
-}
-function it(l, a) {
-  return x(l, a);
-}
-const J = "input, select, textarea, ui-input, ui-select, ui-date-picker, ui-checkbox, ui-upload";
-function k(l) {
-  return l.getAttribute("name") || l.getAttribute("id") || "";
-}
-function G(l) {
-  const a = l.tagName.toLowerCase();
-  if (a === "ui-checkbox")
-    return l.hasAttribute("checked");
-  if (a === "ui-upload") {
-    const s = l == null ? void 0 : l.filesValue;
-    return Array.isArray(s) && s.length > 0 ? s : [];
-  }
-  const t = l == null ? void 0 : l.value;
-  if (typeof t == "string" && t !== "")
-    return t;
-  const e = l.getAttribute("value");
-  return e || "";
-}
-function ot(l, a = {}) {
-  const { includeDisabled: t = !1, includeEmpty: e = !0 } = a, s = {}, i = /* @__PURE__ */ new Map();
-  l.querySelectorAll('input[type="checkbox"]').forEach((r) => {
-    const o = k(r);
-    o && i.set(o, (i.get(o) || 0) + 1);
-  });
-  const n = Array.from(l.querySelectorAll(J));
-  for (const r of n) {
-    if (!t && (r.disabled || r.hasAttribute("disabled"))) continue;
-    const o = k(r);
-    if (!o) continue;
-    if (r instanceof HTMLInputElement) {
-      const d = r.type;
-      if (d === "checkbox") {
-        if ((i.get(o) || 0) > 1) {
-          const h = s[o] || [];
-          r.checked && h.push(r.value || "on"), s[o] = h;
-        } else
-          s[o] = r.checked;
-        continue;
-      }
-      if (d === "radio") {
-        r.checked && (s[o] = r.value);
-        continue;
-      }
-      if (d === "file") {
-        const p = Array.from(r.files ?? []);
-        (e || p.length > 0) && (s[o] = p);
-        continue;
-      }
-      (e || r.value !== "") && (s[o] = r.value);
-      continue;
-    }
-    if (r instanceof HTMLSelectElement) {
-      if (r.multiple) {
-        const d = Array.from(r.selectedOptions).map((p) => p.value);
-        (e || d.length > 0) && (s[o] = d);
-      } else (e || r.value !== "") && (s[o] = r.value);
-      continue;
-    }
-    if (r instanceof HTMLTextAreaElement) {
-      (e || r.value !== "") && (s[o] = r.value);
-      continue;
-    }
-    const c = G(r);
-    (e || (Array.isArray(c) ? c.length > 0 : c !== "")) && (s[o] = c);
-  }
-  return s;
-}
+import { B as s, H as t, U as o, f as I, i as U, j as r, k as n, l as u, m as y, n as l, o as d, p as i, r as p, s as m, t as b, u as q, w as C, x as L, y as T, z as c, d as g, A as B, e as E, g as P, h, c as k, C as x, q as H, b as S, a as f } from "./index-DiYekJaQ.js";
 export {
-  W as HTTPClient,
-  E as UIButton,
-  H as UICard,
-  D as UICheckbox,
-  z as UIDatePicker,
-  S as UIInput,
-  V as UILayout,
-  _ as UILayoutContent,
-  N as UILayoutFooter,
-  j as UILayoutHeader,
-  B as UILayoutSidebar,
-  M as UIModal,
-  I as UIPagination,
-  R as UISelect,
-  F as UIStepper,
-  L as UITable,
-  Y as UITabs,
-  O as UIToast,
-  U as UIUpload,
-  st as addEventListenerById,
-  et as getElementById,
-  ot as getFormValues,
-  Z as http,
-  x as queryElement,
-  tt as queryElements,
-  it as queryModal,
-  rt as queryPagination,
-  at as queryTable
+  s as BaseComponent,
+  t as HTTPClient,
+  o as UIButton,
+  I as UICard,
+  U as UICheckbox,
+  r as UIDatePicker,
+  n as UIInput,
+  u as UILayout,
+  y as UILayoutContent,
+  l as UILayoutFooter,
+  d as UILayoutHeader,
+  i as UILayoutSidebar,
+  p as UIModal,
+  m as UIPagination,
+  b as UISelect,
+  q as UIStepper,
+  C as UITable,
+  L as UITabs,
+  T as UIToast,
+  c as UIUpload,
+  g as addEventListenerById,
+  B as createRouter,
+  E as getElementById,
+  P as getFormValues,
+  h as http,
+  k as queryElement,
+  x as queryElements,
+  H as queryModal,
+  S as queryPagination,
+  f as queryTable
 };