@urnetwork/elements 0.0.0-beta.1

package/dist/selected-location-CzeT_ZqM.js

@@ -0,0 +1,2489 @@
+import { css as c, LitElement as p, html as h } from "lit";
+import { unsafeStatic as ct, html as pt } from "lit/static-html.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const d = (i) => (t, e) => {
+  e !== void 0 ? e.addInitializer(() => {
+    customElements.define(i, t);
+  }) : customElements.define(i, t);
+};
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const D = globalThis, V = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, rt = Symbol(), J = /* @__PURE__ */ new WeakMap();
+let dt = class {
+  constructor(t, e, o) {
+    if (this._$cssResult$ = !0, o !== rt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t, this.t = e;
+  }
+  get styleSheet() {
+    let t = this.o;
+    const e = this.t;
+    if (V && t === void 0) {
+      const o = e !== void 0 && e.length === 1;
+      o && (t = J.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), o && J.set(e, t));
+    }
+    return t;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const ut = (i) => new dt(typeof i == "string" ? i : i + "", void 0, rt), ft = (i, t) => {
+  if (V) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+  else for (const e of t) {
+    const o = document.createElement("style"), r = D.litNonce;
+    r !== void 0 && o.setAttribute("nonce", r), o.textContent = e.cssText, i.appendChild(o);
+  }
+}, X = V ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+  let e = "";
+  for (const o of t.cssRules) e += o.cssText;
+  return ut(e);
+})(i) : i;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: vt, defineProperty: mt, getOwnPropertyDescriptor: gt, getOwnPropertyNames: bt, getOwnPropertySymbols: yt, getPrototypeOf: wt } = Object, y = globalThis, Y = y.trustedTypes, Ct = Y ? Y.emptyScript : "", T = y.reactiveElementPolyfillSupport, E = (i, t) => i, H = { toAttribute(i, t) {
+  switch (t) {
+    case Boolean:
+      i = i ? Ct : null;
+      break;
+    case Object:
+    case Array:
+      i = i == null ? i : JSON.stringify(i);
+  }
+  return i;
+}, fromAttribute(i, t) {
+  let e = i;
+  switch (t) {
+    case Boolean:
+      e = i !== null;
+      break;
+    case Number:
+      e = i === null ? null : Number(i);
+      break;
+    case Object:
+    case Array:
+      try {
+        e = JSON.parse(i);
+      } catch {
+        e = null;
+      }
+  }
+  return e;
+} }, K = (i, t) => !vt(i, t), Q = { attribute: !0, type: String, converter: H, reflect: !1, useDefault: !1, hasChanged: K };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), y.litPropertyMetadata ?? (y.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class M extends HTMLElement {
+  static addInitializer(t) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t, e = Q) {
+    if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
+      const o = Symbol(), r = this.getPropertyDescriptor(t, o, e);
+      r !== void 0 && mt(this.prototype, t, r);
+    }
+  }
+  static getPropertyDescriptor(t, e, o) {
+    const { get: r, set: s } = gt(this.prototype, t) ?? { get() {
+      return this[e];
+    }, set(l) {
+      this[e] = l;
+    } };
+    return { get: r, set(l) {
+      const a = r == null ? void 0 : r.call(this);
+      s == null || s.call(this, l), this.requestUpdate(t, a, o);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) ?? Q;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(E("elementProperties"))) return;
+    const t = wt(this);
+    t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(E("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(E("properties"))) {
+      const e = this.properties, o = [...bt(e), ...yt(e)];
+      for (const r of o) this.createProperty(r, e[r]);
+    }
+    const t = this[Symbol.metadata];
+    if (t !== null) {
+      const e = litPropertyMetadata.get(t);
+      if (e !== void 0) for (const [o, r] of e) this.elementProperties.set(o, r);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [e, o] of this.elementProperties) {
+      const r = this._$Eu(e, o);
+      r !== void 0 && this._$Eh.set(r, e);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(t) {
+    const e = [];
+    if (Array.isArray(t)) {
+      const o = new Set(t.flat(1 / 0).reverse());
+      for (const r of o) e.unshift(X(r));
+    } else t !== void 0 && e.push(X(t));
+    return e;
+  }
+  static _$Eu(t, e) {
+    const o = e.attribute;
+    return o === !1 ? void 0 : typeof o == "string" ? o : typeof t == "string" ? t.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var t;
+    this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
+  }
+  addController(t) {
+    var e;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
+  }
+  removeController(t) {
+    var e;
+    (e = this._$EO) == null || e.delete(t);
+  }
+  _$E_() {
+    const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
+    for (const o of e.keys()) this.hasOwnProperty(o) && (t.set(o, this[o]), delete this[o]);
+    t.size > 0 && (this._$Ep = t);
+  }
+  createRenderRoot() {
+    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return ft(t, this.constructor.elementStyles), t;
+  }
+  connectedCallback() {
+    var t;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
+      var o;
+      return (o = e.hostConnected) == null ? void 0 : o.call(e);
+    });
+  }
+  enableUpdating(t) {
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._$EO) == null || t.forEach((e) => {
+      var o;
+      return (o = e.hostDisconnected) == null ? void 0 : o.call(e);
+    });
+  }
+  attributeChangedCallback(t, e, o) {
+    this._$AK(t, o);
+  }
+  _$ET(t, e) {
+    var s;
+    const o = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, o);
+    if (r !== void 0 && o.reflect === !0) {
+      const l = (((s = o.converter) == null ? void 0 : s.toAttribute) !== void 0 ? o.converter : H).toAttribute(e, o.type);
+      this._$Em = t, l == null ? this.removeAttribute(r) : this.setAttribute(r, l), this._$Em = null;
+    }
+  }
+  _$AK(t, e) {
+    var s, l;
+    const o = this.constructor, r = o._$Eh.get(t);
+    if (r !== void 0 && this._$Em !== r) {
+      const a = o.getPropertyOptions(r), v = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((s = a.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? a.converter : H;
+      this._$Em = r;
+      const B = v.fromAttribute(e, a.type);
+      this[r] = B ?? ((l = this._$Ej) == null ? void 0 : l.get(r)) ?? B, this._$Em = null;
+    }
+  }
+  requestUpdate(t, e, o, r = !1, s) {
+    var l;
+    if (t !== void 0) {
+      const a = this.constructor;
+      if (r === !1 && (s = this[t]), o ?? (o = a.getPropertyOptions(t)), !((o.hasChanged ?? K)(s, e) || o.useDefault && o.reflect && s === ((l = this._$Ej) == null ? void 0 : l.get(t)) && !this.hasAttribute(a._$Eu(t, o)))) return;
+      this.C(t, e, o);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$EP());
+  }
+  C(t, e, { useDefault: o, reflect: r, wrapped: s }, l) {
+    o && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, l ?? e ?? this[t]), s !== !0 || l !== void 0) || (this._$AL.has(t) || (this.hasUpdated || o || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
+  }
+  async _$EP() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$ES;
+    } catch (e) {
+      Promise.reject(e);
+    }
+    const t = this.scheduleUpdate();
+    return t != null && await t, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var o;
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [s, l] of this._$Ep) this[s] = l;
+        this._$Ep = void 0;
+      }
+      const r = this.constructor.elementProperties;
+      if (r.size > 0) for (const [s, l] of r) {
+        const { wrapped: a } = l, v = this[s];
+        a !== !0 || this._$AL.has(s) || v === void 0 || this.C(s, void 0, l, v);
+      }
+    }
+    let t = !1;
+    const e = this._$AL;
+    try {
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (o = this._$EO) == null || o.forEach((r) => {
+        var s;
+        return (s = r.hostUpdate) == null ? void 0 : s.call(r);
+      }), this.update(e)) : this._$EM();
+    } catch (r) {
+      throw t = !1, this._$EM(), r;
+    }
+    t && this._$AE(e);
+  }
+  willUpdate(t) {
+  }
+  _$AE(t) {
+    var e;
+    (e = this._$EO) == null || e.forEach((o) => {
+      var r;
+      return (r = o.hostUpdated) == null ? void 0 : r.call(o);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t) {
+    return !0;
+  }
+  update(t) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
+  }
+  updated(t) {
+  }
+  firstUpdated(t) {
+  }
+}
+M.elementStyles = [], M.shadowRootOptions = { mode: "open" }, M[E("elementProperties")] = /* @__PURE__ */ new Map(), M[E("finalized")] = /* @__PURE__ */ new Map(), T == null || T({ ReactiveElement: M }), (y.reactiveElementVersions ?? (y.reactiveElementVersions = [])).push("2.1.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const kt = { attribute: !0, type: String, converter: H, reflect: !1, hasChanged: K }, _t = (i = kt, t, e) => {
+  const { kind: o, metadata: r } = e;
+  let s = globalThis.litPropertyMetadata.get(r);
+  if (s === void 0 && globalThis.litPropertyMetadata.set(r, s = /* @__PURE__ */ new Map()), o === "setter" && ((i = Object.create(i)).wrapped = !0), s.set(e.name, i), o === "accessor") {
+    const { name: l } = e;
+    return { set(a) {
+      const v = t.get.call(this);
+      t.set.call(this, a), this.requestUpdate(l, v, i, !0, a);
+    }, init(a) {
+      return a !== void 0 && this.C(l, void 0, i, a), a;
+    } };
+  }
+  if (o === "setter") {
+    const { name: l } = e;
+    return function(a) {
+      const v = this[l];
+      t.call(this, a), this.requestUpdate(l, v, i, !0, a);
+    };
+  }
+  throw Error("Unsupported decorator location: " + o);
+};
+function n(i) {
+  return (t, e) => typeof e == "object" ? _t(i, t, e) : ((o, r, s) => {
+    const l = r.hasOwnProperty(s);
+    return r.constructor.createProperty(s, o), l ? Object.getOwnPropertyDescriptor(r, s) : void 0;
+  })(i, t, e);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const $t = (i, t, e) => (e.configurable = !0, e.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(i, t, e), e);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function ot(i, t) {
+  return (e, o, r) => {
+    const s = (l) => {
+      var a;
+      return ((a = l.renderRoot) == null ? void 0 : a.querySelector(i)) ?? null;
+    };
+    return $t(e, o, { get() {
+      return s(this);
+    } });
+  };
+}
+var xt = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, W = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Mt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && xt(t, e, r), r;
+};
+let P = class extends p {
+  constructor() {
+    super(...arguments), this.size = 40, this.color = "gray-dark";
+  }
+  get borderColor() {
+    return this.color === "white" ? "var(--ur-color-white, #f8f8f8)" : "var(--ur-color-gray-dark, #909090)";
+  }
+  render() {
+    return h`<div
+			class="spinner"
+			style="
+				width: ${this.size}px;
+				height: ${this.size}px;
+				border-color: ${this.borderColor};
+				border-top-color: transparent;
+			"
+		></div>`;
+  }
+};
+P.styles = c`
+		.spinner {
+			border: 3px solid var(--ur-color-white);
+			border-top: 3px solid transparent;
+			border-radius: 50%;
+			animation: spin 1s linear infinite;
+		}
+
+		@keyframes spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	`;
+W([
+  n({ type: Number })
+], P.prototype, "size", 2);
+W([
+  n({ type: String })
+], P.prototype, "color", 2);
+P = W([
+  d("ur-spinner")
+], P);
+const St = c`
+	button {
+		font-family: "PpNeueBitBold", system-ui, sans-serif;
+		font-size: 1.4rem;
+		padding: 0.8rem 1.6rem;
+		border-radius: 0.8rem;
+		border: none;
+		cursor: pointer;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition:
+			background 0.1s ease,
+			border-color 0.1s ease;
+	}
+	:host([variant="primary"]) button {
+		background: var(--ur-color-blue-electric);
+		color: var(--ur-color-white);
+		border: 1px solid var(--ur-color-blue-electric);
+	}
+	:host([variant="primary"]) button:disabled {
+		background: color-mix(
+			in srgb,
+			var(--ur-color-blue-electric) 70%,
+			white 30%
+		);
+		color: var(--ur-color-white);
+		border: 1px solid
+			color-mix(in srgb, var(--ur-color-blue-electric) 70%, white 30%);
+		cursor: not-allowed;
+	}
+	:host([variant="primary"]) button:hover:not(:disabled) {
+		background: color-mix(
+			in srgb,
+			var(--ur-color-blue-electric) 85%,
+			white 15%
+		);
+		border: 1px solid
+			color-mix(in srgb, var(--ur-color-blue-electric) 85%, white 15%);
+	}
+	:host([variant="secondary"]) button {
+		background: transparent;
+		color: var(--ur-color-gray-dark);
+		border: 1px solid var(--ur-color-gray-dark);
+	}
+	:host([variant="secondary"]) button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 2%);
+		border-color: color-mix(in srgb, var(--ur-color-gray-dark) 80%, black 20%);
+		color: color-mix(in srgb, var(--ur-color-gray-dark) 80%, black 20%);
+	}
+	:host([fullwidth]) {
+		display: block;
+		width: 100%;
+	}
+	:host([fullwidth]) button {
+		width: 100%;
+		display: block;
+	}
+	.button-content {
+		/* Hide when loading, but preserve space */
+		visibility: visible;
+	}
+	.button-spinner {
+		display: none;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	:host([loading]) .button-content {
+		visibility: hidden;
+	}
+	:host([loading]) .button-spinner {
+		display: block;
+	}
+`;
+var Et = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, C = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Pt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && Et(t, e, r), r;
+};
+const Se = ["primary", "secondary"], Ee = ["button", "submit", "reset"];
+let m = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.disabled = !1, this.fullWidth = !1, this.loading = !1, this.buttonType = "button";
+  }
+  _handleClick(i) {
+    this.onClick && this.onClick(i);
+  }
+  render() {
+    return h`
+			<button
+				type=${this.buttonType}
+				@click=${this._handleClick}
+				?disabled=${this.disabled || this.loading}
+			>
+				<span class="button-content"><slot></slot></span>
+				<span class="button-spinner"
+					><ur-spinner size=${8} color="white"></ur-spinner
+				></span>
+			</button>
+		`;
+  }
+};
+m.formAssociated = !0;
+m.styles = St;
+C([
+  n({ type: Function })
+], m.prototype, "onClick", 2);
+C([
+  n({ type: String, reflect: !0 })
+], m.prototype, "variant", 2);
+C([
+  n({ type: Boolean })
+], m.prototype, "disabled", 2);
+C([
+  n({ type: Boolean, reflect: !0 })
+], m.prototype, "fullWidth", 2);
+C([
+  n({ type: Boolean })
+], m.prototype, "loading", 2);
+C([
+  n({ type: String })
+], m.prototype, "buttonType", 2);
+m = C([
+  d("ur-button")
+], m);
+const Zt = c`
+	:host {
+		display: block;
+		font-family: var(--font-family-base, system-ui, sans-serif);
+		width: 100%;
+	}
+
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ur-space-sm, 0.5rem);
+		align-items: flex-start;
+		width: 100%;
+	}
+
+	.input-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.input-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--ur-color-gray-dark);
+	}
+
+	.input-label.error {
+		color: var(--ur-color-coral, #ff6c58);
+	}
+
+	.required {
+		color: var(--ur-color-coral);
+		margin-left: 0.25rem;
+	}
+
+	.input-field {
+		width: 100%;
+		padding: 0.75rem 1rem;
+		font-size: 1rem;
+		color: var(--ur-color-black, #000);
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 5%);
+		border: 1px solid var(--ur-color-border);
+		border-radius: 0.5rem;
+		transition:
+			border-color 0.1s ease,
+			box-shadow 0.1s ease;
+		outline: none;
+		box-sizing: border-box;
+		color: var(--ur-color-white);
+	}
+
+	/* Hover state */
+	.input-field:hover:not([disabled]):not([readonly]) {
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 7%);
+		border-color: color-mix(in srgb, var(--ur-color-border, #101010), #fff 2%);
+	}
+
+	.input-field:focus {
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 10%);
+
+		border: 1px solid
+			color-mix(in srgb, var(--ur-color-black, #101010), #fff 15%);
+	}
+
+	.input-field[disabled] {
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 2%);
+		color: color-mix(in srgb, var(--ur-color-gray, #b7b7b7), transparent 60%);
+		border-color: color-mix(in srgb, var(--ur-color-black, #101010), #fff 15%);
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.input-field[readonly] {
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 2%);
+		color: var(--color-white, #f8f8f8);
+		border-color: color-mix(in srgb, var(--ur-color-black, #101010), #fff 15%);
+		cursor: default;
+		opacity: 0.6;
+	}
+
+	.input-field.error {
+		border-color: var(--ur-color-coral, #ff6c58);
+	}
+
+	.input-field.error:focus {
+		border-color: color-mix(in srgb, var(--ur-color-coral, #ff6c58), #fff 15%);
+	}
+
+	.hint {
+		font-size: 0.875rem;
+		color: var(--ur-color-gray-dark);
+		text-align: left;
+	}
+
+	.hint.error {
+		color: var(--ur-color-coral, #ff6c58);
+	}
+
+	:host([loading]) .input-field {
+		padding-right: 2.75rem;
+	}
+
+	/* Error icon state */
+	:host([invalid]) .input-field {
+		padding-right: 2.75rem;
+	}
+
+	.input-spinner,
+	.input-error-icon {
+		position: absolute;
+		right: 0.75rem;
+		pointer-events: none;
+	}
+`, Ot = c`
+	:host {
+		display: block;
+		width: 16px;
+		height: 16px;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+`;
+var Bt = Object.getOwnPropertyDescriptor, Dt = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Bt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = l(r) || r);
+  return r;
+};
+let U = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Interface-Essential-Alert-Triangle-1--Streamline-Pixel"
+			>
+				<desc>
+					Interface Essential Alert Triangle 1 Streamline Icon:
+					https://streamlinehq.com
+				</desc>
+				<title>interface-essential-alert-triangle-1</title>
+				<g>
+					<path
+						d="M30.48 27.43H32v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.95 24.38h1.53v3.05h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 30.48h28.96V32H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.43 21.33h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M25.9 18.29h1.53v3.04H25.9Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M24.38 15.24h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.86 12.19h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.33 9.14h1.53v3.05h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M19.81 6.09h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.29 3.05h1.52v3.04h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m18.29 21.33 -4.58 0 0 1.53 -1.52 0 0 4.57 1.52 0 0 1.52 4.58 0 0 -1.52 1.52 0 0 -4.57 -1.52 0 0 -1.53z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.29 9.14h-4.58v1.53h-1.52v6.09h1.52v3.05h4.58v-3.05h1.52v-6.09h-1.52Zm0 6.1h-1.53v-3.05h-1.52v-1.52h1.52v1.52h1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M16.76 1.52h1.53v1.53h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M15.24 0h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.71 1.52h1.53v1.53h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 3.05h1.52v3.04h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.67 6.09h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 9.14h1.53v3.05H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M7.62 12.19h1.52v3.05H7.62Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.09 15.24h1.53v3.05H6.09Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M4.57 18.29h1.52v3.04H4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.05 21.33h1.52v3.05H3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 24.38h1.53v3.05H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M0 27.43h1.52v3.05H0Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+U.styles = Ot;
+U = Dt([
+  d("ur-icon-warning")
+], U);
+var Ht = Object.defineProperty, At = Object.getOwnPropertyDescriptor, f = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? At(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && Ht(t, e, r), r;
+};
+const Pe = [
+  "text",
+  "email",
+  "password",
+  "search",
+  "tel",
+  "url",
+  "number"
+];
+let u = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.type = "text", this.disabled = !1, this.readonly = !1, this.loading = !1, this.name = "", this.label = "", this.hint = "", this.invalid = !1, this.required = !1;
+  }
+  // Event handler for input changes
+  handleInput(i) {
+    const t = i.target;
+    this.value = t.value, this.dispatchEvent(
+      new CustomEvent("ur-input", {
+        detail: { value: t.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // Event handler for native change event
+  handleChange(i) {
+    const t = i.target;
+    this.dispatchEvent(
+      new CustomEvent("ur-change", {
+        detail: { value: t.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(i) {
+    if (i.key === "Enter") {
+      const t = this.closest("form");
+      t && (i.preventDefault(), setTimeout(() => {
+        t.requestSubmit();
+      }, 10));
+    }
+  }
+  render() {
+    return h`
+			<div class="input-wrapper">
+				${this.label ? h`<label class="input-label ${this.invalid ? "error" : ""}">
+							${this.label}
+							${this.required ? h`<span class="required">*</span>` : ""}
+						</label>` : ""}
+
+				<div class="input-container">
+					<input
+						type=${this.type}
+						.value=${this.value}
+						placeholder=${this.placeholder}
+						?disabled=${this.disabled || this.loading}
+						?readonly=${this.readonly}
+						?required=${this.required}
+						minlength=${this.minLength ?? ""}
+						maxlength=${this.maxLength ?? ""}
+						name=${this.name}
+						class="input-field ${this.invalid ? "error" : ""}"
+						@input=${this.handleInput}
+						@change=${this.handleChange}
+						@keydown=${this.handleKeyDown}
+					/>
+
+					${this.loading ? h`<ur-spinner class="input-spinner" size="8"></ur-spinner>` : ""}
+					${this.invalid && !this.loading ? h`<ur-icon-warning
+								class="input-error-icon"
+								style="color: var(--ur-color-coral)"
+							></ur-icon-warning>` : ""}
+				</div>
+
+				${this.hint ? h`<span class="hint ${this.invalid ? "error" : ""}"
+							>${this.hint}</span
+						>` : ""}
+			</div>
+		`;
+  }
+};
+u.styles = Zt;
+f([
+  n({ type: String })
+], u.prototype, "value", 2);
+f([
+  n({ type: String })
+], u.prototype, "placeholder", 2);
+f([
+  n({ type: String })
+], u.prototype, "type", 2);
+f([
+  n({ type: Boolean, reflect: !0 })
+], u.prototype, "disabled", 2);
+f([
+  n({ type: Boolean, reflect: !0 })
+], u.prototype, "readonly", 2);
+f([
+  n({ type: Boolean, reflect: !0 })
+], u.prototype, "loading", 2);
+f([
+  n({ type: String })
+], u.prototype, "name", 2);
+f([
+  n({ type: String })
+], u.prototype, "label", 2);
+f([
+  n({ type: String })
+], u.prototype, "hint", 2);
+f([
+  n({ type: Boolean, reflect: !0 })
+], u.prototype, "invalid", 2);
+f([
+  n({ type: Boolean, reflect: !0 })
+], u.prototype, "required", 2);
+f([
+  n({ type: Number })
+], u.prototype, "minLength", 2);
+f([
+  n({ type: Number })
+], u.prototype, "maxLength", 2);
+u = f([
+  d("ur-input")
+], u);
+const zt = c`
+	/* Base styles that apply to all variants */
+	:host {
+		display: inline-block;
+		color: var(--ur-color-white);
+	}
+
+	/* Block-level display for headers */
+	:host([variant="header"]),
+	:host([variant="subheader"]) {
+		display: block;
+	}
+
+	/* Header variant - maps to h1 */
+	:host([variant="header"]) .text {
+		font-family: "AbcGravityExtended", system-ui, sans-serif;
+		font-size: 2.2rem;
+		line-height: 2.4rem;
+		font-weight: normal;
+		margin: 0;
+	}
+
+	/* Subheader variant - maps to h2 */
+	:host([variant="subheader"]) .text {
+		font-family: "AbcGravityExtraCondensed", system-ui, sans-serif;
+		font-size: 2rem; /* 32px */
+		/*line-height: 1.3;*/
+		font-weight: normal;
+		margin: 0;
+	}
+
+	/* Body variant (default) - maps to p */
+	:host([variant="body"]) .text,
+	:host(:not([variant])) .text {
+		font-family: var(--ur-font-family-base);
+		font-size: 1rem; /* 16px */
+		/*line-height: 1.5;*/
+		font-weight: normal;
+		margin: 0;
+	}
+
+	/* Small variant - maps to small */
+	:host([variant="small"]) .text {
+		font-family: var(--ur-font-family-base);
+		font-size: 0.875rem; /* 14px */
+		/*line-height: 1.4;*/
+		font-weight: normal;
+		margin: 0;
+	}
+
+	/* Optional: Support for custom color override */
+	:host([color]) .text {
+		color: inherit;
+	}
+
+	/* Optional: Support for bold text */
+	:host([bold]) .text {
+		font-weight: bold;
+	}
+
+	/* Optional: Support for italic text */
+	:host([italic]) .text {
+		font-style: italic;
+	}
+
+	/* Optional: Support for text alignment */
+	:host([align="left"]) .text {
+		text-align: left;
+	}
+	:host([align="center"]) .text {
+		text-align: center;
+	}
+	:host([align="right"]) .text {
+		text-align: right;
+	}
+`;
+var jt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, x = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Ft(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && jt(t, e, r), r;
+};
+const Ze = ["header", "subheader", "body", "small"];
+let w = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "body", this.bold = !1, this.italic = !1;
+  }
+  // Map variants to semantic HTML tags
+  getElementTag() {
+    switch (this.variant) {
+      case "header":
+        return "h1";
+      case "subheader":
+        return "h2";
+      case "small":
+        return "small";
+      case "body":
+      default:
+        return "p";
+    }
+  }
+  render() {
+    const i = ct(this.getElementTag()), t = this.color ? `color: ${this.color};` : "";
+    return pt`<${i} class="text" style="${t}"><slot></slot></${i}>`;
+  }
+};
+w.styles = zt;
+x([
+  n({ type: String, reflect: !0 })
+], w.prototype, "variant", 2);
+x([
+  n({ type: String })
+], w.prototype, "color", 2);
+x([
+  n({ type: Boolean, reflect: !0 })
+], w.prototype, "bold", 2);
+x([
+  n({ type: Boolean, reflect: !0 })
+], w.prototype, "italic", 2);
+x([
+  n({ type: String, reflect: !0 })
+], w.prototype, "align", 2);
+w = x([
+  d("ur-text")
+], w);
+const It = c`
+	:host {
+		font-family: "PpNeueBitBold", system-ui, sans-serif;
+		font-size: 1.4rem;
+	}
+
+	button {
+		all: unset;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 8px 12px;
+		cursor: pointer;
+		color: var(--ur-color-gray);
+	}
+
+	button:hover {
+		color: var(--ur-color-green);
+	}
+`, Tt = c`
+	:host {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+`;
+var Ut = Object.getOwnPropertyDescriptor, Lt = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Ut(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = l(r) || r);
+  return r;
+};
+let L = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Interface-Essential-Navigation-Left-Circle-2--Streamline-Pixel"
+			>
+				<desc>
+					Interface Essential Navigation Left Circle 2 Streamline Icon:
+					https://streamlinehq.com
+				</desc>
+				<title>interface-essential-navigation-left-circle-2</title>
+				<g>
+					<path
+						d="M30.48 12.19H32v7.62h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.95 19.81h1.53v3.05h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.95 9.14h1.53v3.05h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.43 22.86h1.52v3.04h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.43 6.09h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M25.9 25.9h1.53v1.53H25.9Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M25.9 4.57h1.53v1.52H25.9Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.86 27.43h3.04v1.52h-3.04Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m24.38 12.19 -1.52 0 0 -1.52 -9.15 0 0 -3.05 -1.52 0 0 1.52 -1.52 0 0 1.53 -1.53 0 0 1.52 -1.52 0 0 1.52 -1.53 0 0 1.53 1.53 0 0 1.52 1.52 0 0 1.53 1.53 0 0 1.52 1.52 0 0 1.52 1.52 0 0 -3.04 6.1 0 0 1.52 1.52 0 0 1.52 -1.52 0 0 1.53 -1.52 0 0 1.52 3.04 0 0 -1.52 3.05 0 0 -1.53 1.52 0 0 -7.62 -1.52 0 0 -1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.86 3.05h3.04v1.52h-3.04Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M19.81 28.95h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M19.81 1.52h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 30.48h7.62V32h-7.62Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 0h7.62v1.52h-7.62Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 28.95h3.05v1.53H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 1.52h3.05v1.53H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.09 27.43h3.05v1.52H6.09Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.09 3.05h3.05v1.52H6.09Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M4.57 25.9h1.52v1.53H4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M4.57 4.57h1.52v1.52H4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.05 22.86h1.52v3.04H3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.05 6.09h1.52v3.05H3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 19.81h1.53v3.05H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 9.14h1.53v3.05H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M0 12.19h1.52v7.62H0Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+L.styles = Tt;
+L = Lt([
+  d("ur-icon-back")
+], L);
+var Nt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, G = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Rt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && Nt(t, e, r), r;
+};
+let Z = class extends p {
+  constructor() {
+    super(...arguments), this.label = "Back";
+  }
+  _handleClick(i) {
+    this.onClick && this.onClick(i);
+  }
+  render() {
+    return h`
+			<button @click=${this._handleClick}>
+				<ur-icon-back></ur-icon-back>
+				<span style="padding-top: 0.125rem"> ${this.label} </span>
+			</button>
+		`;
+  }
+};
+Z.styles = It;
+G([
+  n({ type: Function })
+], Z.prototype, "onClick", 2);
+G([
+  n({ type: String })
+], Z.prototype, "label", 2);
+Z = G([
+  d("ur-back-button")
+], Z);
+const qt = c`
+	:host {
+		display: list-item;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.location-list-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		box-sizing: border-box;
+		padding: var(--ur-space-sm) var(--ur-space-md);
+		cursor: pointer;
+		transition: background-color 0.15s;
+	}
+
+	:host(:not(:first-child)) .location-list-item {
+		border-top: 1px solid var(--ur-color-border);
+	}
+
+	.location-list-item:hover {
+		background-color: color-mix(
+			in srgb,
+			var(--ur-color-black, #101010),
+			#fff 2%
+		);
+	}
+
+	.leading-list-item-content {
+		display: flex;
+		align-items: center;
+		/*flex-flow: column;*/
+	}
+
+	.location-text-content {
+		display: flex;
+		flex-flow: column;
+		align-items: start;
+	}
+
+	.color-circle {
+		width: 1.6rem;
+		height: 1.6rem;
+		border-radius: 50%;
+		margin-right: var(--ur-space-sm);
+	}
+`, O = c`
+	:host {
+		display: inline-block;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+`, Vt = c`
+	:host {
+		width: 1.2em;
+		height: 1.2em;
+	}
+
+	svg {
+		color: var(--ur-color-yellow-light);
+	}
+`;
+var Kt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, it = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Wt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && Kt(t, e, r), r;
+};
+let A = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Internet-Network-Cloud-Error--Streamline-Pixel"
+				aria-hidden=${this.title ? "false" : "true"}
+				role=${this.title ? "img" : "presentation"}
+			>
+				${this.title ? h`<title>${this.title}</title>` : ""}
+				<desc>
+					Internet Network Cloud Error Streamline Icon: https://streamlinehq.com
+				</desc>
+				<title>internet-network-cloud-error</title>
+				<g>
+					<path
+						d="M30.47 16.005H32v6.09h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.95 22.095h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.95 14.475h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.43 23.625h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.43 12.955h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.05 25.145h24.38v1.52H3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M24.38 11.435h3.05v1.52h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.85 9.905h1.53v1.53h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.33 17.525h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.33 14.475h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.33 8.385h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M19.81 16.005h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.28 17.525h1.53v1.52h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.28 14.475h1.53v1.53h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.28 6.855h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m13.71 22.095 3.05 0 0 1.53 3.05 0 0 -3.05 -6.1 0 0 1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.71 5.335h4.57v1.52h-4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 17.525h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 14.475h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.66 6.855h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.66 16.005h1.53v1.52h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 17.525h1.52v1.52H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 14.475h1.52v1.53H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.14 8.385h1.52v1.52H9.14Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M7.62 9.905h1.52v3.05H7.62Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.05 12.955h4.57v1.52H3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 23.625h1.53v1.52H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M1.52 14.475h1.53v1.53H1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M0 16.005h1.52v7.62H0Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+A.styles = [O, Vt];
+it([
+  n({ type: String })
+], A.prototype, "iconTitle", 2);
+A = it([
+  d("ur-icon-network-instability")
+], A);
+const Gt = c`
+	:host {
+		width: 1.2em;
+		height: 1.2em;
+	}
+
+	svg {
+		color: var(--ur-color-green);
+	}
+`;
+var Jt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, st = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? Xt(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && Jt(t, e, r), r;
+};
+let z = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Interface-Essential-Lock-Shield--Streamline-Pixel"
+				aria-hidden=${this.title ? "false" : "true"}
+				role=${this.title ? "img" : "presentation"}
+			>
+				${this.title ? h`<title>${this.title}</title>` : ""}
+				<desc>
+					Interface Essential Lock Shield Streamline Icon:
+					https://streamlinehq.com
+				</desc>
+				<title>interface-essential-lock-shield</title>
+				<g>
+					<path
+						d="M27.425 4.57h1.53v16.76h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M25.905 21.33h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M24.385 24.38h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M24.385 3.05h3.04v1.52h-3.04Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.855 25.91h1.53v1.52h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M22.855 13.71h1.53v9.15h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.335 27.43h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.335 22.86h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M21.335 1.52h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.285 28.95h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.665 24.38h10.67v1.53h-10.67Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m18.285 18.29 -1.52 0 0 -1.53 -1.53 0 0 -1.52 -1.52 0 0 1.52 -1.52 0 0 3.05 1.52 0 0 1.52 1.52 0 0 1.53 1.53 0 0 -1.53 1.52 0 0 -1.52 1.53 0 0 -3.05 -1.53 0 0 1.53z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.285 4.57h1.53V6.1h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M16.765 15.24h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.715 30.48h4.57V32h-4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.715 3.05h4.57v1.52h-4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.665 28.95h3.05v1.53h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.195 4.57h1.52V6.1h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M10.665 0h10.67v1.52h-10.67Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m22.855 13.71 0 -1.52 -1.52 0 0 -6.09 -1.52 0 0 6.09 -7.62 0 0 -6.09 -1.53 0 0 6.09 -1.52 0 0 1.52 13.71 0z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.145 27.43h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M9.145 22.86h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M7.625 1.52h3.04v1.53h-3.04Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M7.625 25.91h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M7.625 13.71h1.52v9.15h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.095 24.38h1.53v1.53h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M4.575 3.05h3.05v1.52h-3.05Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M4.575 21.33h1.52v3.05h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.045 4.57h1.53v16.76h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+z.styles = [O, Gt];
+st([
+  n({ type: String })
+], z.prototype, "iconTitle", 2);
+z = st([
+  d("ur-icon-privacy")
+], z);
+const S = {
+  is: "639A88",
+  ee: "78C0E0",
+  ca: "449DD1",
+  de: "663F46",
+  au: "F29E4C",
+  us: "BAC5B3",
+  gb: "F1789B",
+  jp: "CC3363",
+  ie: "7EE081",
+  fi: "F56E48",
+  nl: "F56E48",
+  se: "A4C4F4",
+  fr: "A864DC",
+  it: "F9F871",
+  dk: "D6E6F4",
+  no: "BCE5DC",
+  be: "9B4A91",
+  at: "FFCB68",
+  ch: "FFABA0",
+  nz: "008A64",
+  pt: "248C89",
+  es: "B41F43",
+  lv: "EEE8A9",
+  lt: "8179E0",
+  cz: "99E8CE",
+  si: "FF6C58",
+  sk: "87FB67",
+  pl: "D38B5D",
+  hu: "FF8484",
+  hr: "99B2DD",
+  ro: "C6362F",
+  bg: "A1CDF4",
+  gr: "C874D9",
+  cy: "E1BBC9",
+  mt: "FFC43D",
+  il: "A9E4EF",
+  za: "F2B79F",
+  ar: "8E8DBE",
+  br: "DCD6F7",
+  cl: "FA824C",
+  cr: "E07A5F",
+  uy: "7FDEFF",
+  jm: "7B886F",
+  tt: "0072BB",
+  gh: "1098F7",
+  ke: "F2EDEB",
+  ng: "64113F",
+  tn: "6B4D57",
+  sn: "596869",
+  na: "813405",
+  bw: "D45113",
+  mu: "60E1E0",
+  mg: "F25D72",
+  in: "F2E2D2",
+  kr: "C320D9",
+  tw: "E6EA23",
+  my: "3A1772",
+  ph: "B4CEB3",
+  id: "586189",
+  mn: "A6A57A",
+  ge: "679436",
+  am: "F2B5D4",
+  ua: "00F28D",
+  md: "7F675B",
+  me: "E5FFDE",
+  rs: "FF495C",
+  al: "E4B363"
+};
+function tt(i) {
+  const t = i.replace("#", ""), e = parseInt(t, 16);
+  return [e >> 16 & 255, e >> 8 & 255, e & 255];
+}
+function Yt(i, t, e) {
+  return "#" + [i, t, e].map((o) => {
+    const r = o.toString(16);
+    return r.length === 1 ? "0" + r : r;
+  }).join("");
+}
+function Qt(i) {
+  let t = 0;
+  for (let e = 0; e < i.length; e++) {
+    const o = i.charCodeAt(e);
+    t = (t << 5) - t + o, t = t & t;
+  }
+  return Math.abs(t);
+}
+function et(i, t) {
+  return t === 0 ? 0 : (Qt(i) & 255) % t;
+}
+function te(i, t) {
+  const [e, o, r] = tt(i), [s, l, a] = tt(t), v = Math.round((e + s) / 2), B = Math.round((o + l) / 2), ht = Math.round((r + a) / 2);
+  return Yt(v, B, ht);
+}
+function lt(i) {
+  const t = i.toLowerCase();
+  if (S[t])
+    return "#" + S[t];
+  const e = Object.keys(S).sort(), o = et(t, e.length), r = et(t + "salt", e.length), s = S[e[o]], l = S[e[r]];
+  return te(s, l);
+}
+var ee = Object.defineProperty, re = Object.getOwnPropertyDescriptor, k = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? re(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && ee(t, e, r), r;
+};
+let g = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.providerCount = 0, this.unstable = !1, this.strongPrivacy = !1;
+  }
+  formatNumber(i) {
+    return i.toLocaleString("en-US");
+  }
+  render() {
+    const i = this.locationKey ? lt(this.locationKey) : "#000000";
+    return h`
+			<div class="location-list-item" @click=${this.onClick}>
+				<div class="leading-list-item-content">
+					<!-- color circle -->
+					<div class="color-circle" style="background-color: ${i}"></div>
+
+					<div class="location-text-content">
+						<ur-text variant="body">${this.name}</ur-text>
+						<ur-text variant="small" color="var(--ur-color-gray)">
+							${this.formatNumber(this.providerCount)}
+							provider${this.providerCount === 1 ? "" : "s"}
+						</ur-text>
+					</div>
+				</div>
+
+				<div class="trailing-list-item-content">
+					${this.unstable ? h`
+								<ur-icon-network-instability
+									title="This location has network instability"
+								></ur-icon-network-instability>
+							` : null}
+					${this.strongPrivacy ? h`
+								<ur-icon-privacy
+									style="margin-left: 0.5rem;"
+									title="This location offers strong privacy features"
+								></ur-icon-privacy>
+							` : null}
+				</div>
+			</div>
+		`;
+  }
+};
+g.styles = qt;
+k([
+  n({ type: String })
+], g.prototype, "locationKey", 2);
+k([
+  n({ type: String })
+], g.prototype, "name", 2);
+k([
+  n({ type: Number })
+], g.prototype, "providerCount", 2);
+k([
+  n({ type: Boolean })
+], g.prototype, "unstable", 2);
+k([
+  n({ type: Boolean })
+], g.prototype, "strongPrivacy", 2);
+k([
+  n({ type: Function })
+], g.prototype, "onClick", 2);
+g = k([
+  d("ur-location-list-item")
+], g);
+const oe = c`
+	:host {
+		width: 1.6em;
+		height: 1.6em;
+	}
+
+	svg {
+		color: var(--ur-color-gray-dark);
+		transform-origin: center;
+		animation: loading-step 1s steps(8, end) infinite;
+	}
+
+	@keyframes loading-step {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+`;
+var ie = Object.defineProperty, se = Object.getOwnPropertyDescriptor, nt = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? se(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && ie(t, e, r), r;
+};
+let j = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Interface-Essential-Loading-Circle-2--Streamline-Pixel"
+			>
+				<desc>
+					Interface Essential Loading Circle 2 Streamline Icon:
+					https://streamlinehq.com
+				</desc>
+				<title>interface-essential-loading-circle-2</title>
+				<g>
+					<path
+						d="m30.47 16.76 -3.05 0 0 -3.05 3.05 0 0 -1.52 -4.57 0 0 1.52 -1.52 0 0 4.58 1.52 0 0 1.52 4.57 0 0 -1.52 1.53 0 0 -4.58 -1.53 0 0 3.05z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M27.42 22.86h1.53v4.57h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m22.85 21.33 0 1.53 -1.52 0 0 4.57 1.52 0 0 1.52 4.57 0 0 -1.52 -3.04 0 0 -4.57 3.04 0 0 -1.53 -4.57 0z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m27.42 10.67 0 -1.53 1.53 0 0 -4.57 -1.53 0 0 3.05 -1.52 0 0 -1.53 -1.52 0 0 -1.52 3.04 0 0 -1.52 -4.57 0 0 1.52 -1.52 0 0 4.57 1.52 0 0 1.53 4.57 0z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M18.28 25.9h1.52v4.58h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m19.8 1.52 -1.52 0 0 -1.52 -4.57 0 0 1.52 -1.52 0 0 4.57 1.52 0 0 1.53 4.57 0 0 -1.53 1.52 0 0 -4.57z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.71 30.48h4.57V32h-4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M13.71 24.38h4.57v1.52h-4.57Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M12.19 25.9h1.52v4.58h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m9.14 28.95 0 -1.52 1.52 0 0 -4.57 -1.52 0 0 -1.53 -4.57 0 0 1.53 3.04 0 0 4.57 -3.04 0 0 1.52 4.57 0z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m10.66 4.57 -1.52 0 0 -1.52 -4.57 0 0 1.52 3.04 0 0 1.52 -1.52 0 0 1.53 -1.52 0 0 -3.05 -1.53 0 0 4.57 1.53 0 0 1.53 4.57 0 0 -1.53 1.52 0 0 -4.57z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.04 22.86h1.53v4.57H3.04Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m1.52 19.81 4.57 0 0 -1.52 1.52 0 0 -4.58 -1.52 0 0 -1.52 -4.57 0 0 1.52 3.05 0 0 3.05 -3.05 0 0 -3.05 -1.52 0 0 4.58 1.52 0 0 1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+j.styles = [O, oe];
+nt([
+  n({ type: String })
+], j.prototype, "iconTitle", 2);
+j = nt([
+  d("ur-icon-spinner")
+], j);
+const le = c`
+	:host {
+		width: 1.2em;
+		height: 1.2em;
+	}
+
+	svg {
+		color: var(--ur-color-gray-dark);
+	}
+
+	svg:hover {
+		color: var(--ur-color-green);
+	}
+`;
+var ne = Object.getOwnPropertyDescriptor, ae = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? ne(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = l(r) || r);
+  return r;
+};
+let N = class extends p {
+  render() {
+    return h`
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 32 32"
+				id="Interface-Essential-Navigation-Menu-3--Streamline-Pixel"
+			>
+				<desc>
+					Interface Essential Navigation Menu 3 Streamline Icon:
+					https://streamlinehq.com
+				</desc>
+				<title>interface-essential-navigation-menu-3</title>
+				<g>
+					<path
+						d="M29.71 3.81h1.53v24.38h-1.53Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.19 28.19h1.52v1.52h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M28.19 2.28h1.52v1.53h-1.52Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.81 29.71h24.38v1.53H3.81Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m25.14 20.57 -18.28 0 0 1.52 -1.53 0 0 3.05 1.53 0 0 -1.52 18.28 0 0 1.52 1.53 0 0 -3.05 -1.53 0 0 -1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m25.14 12.95 -18.28 0 0 1.52 -1.53 0 0 3.05 1.53 0 0 -1.52 18.28 0 0 1.52 1.53 0 0 -3.05 -1.53 0 0 -1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="m25.14 5.33 -18.28 0 0 1.52 -1.53 0 0 3.05 1.53 0 0 -1.52 18.28 0 0 1.52 1.53 0 0 -3.05 -1.53 0 0 -1.52z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.86 25.14h18.28v1.52H6.86Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.86 17.52h18.28v1.52H6.86Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M6.86 9.9h18.28v1.53H6.86Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M3.81 0.76h24.38v1.52H3.81Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M2.29 28.19h1.52v1.52H2.29Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M2.29 2.28h1.52v1.53H2.29Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+					<path
+						d="M0.76 3.81h1.53v24.38H0.76Z"
+						fill="currentColor"
+						stroke-width="1"
+					></path>
+				</g>
+			</svg>
+		`;
+  }
+};
+N.styles = [O, le];
+N = ae([
+  d("ur-icon-hamburger")
+], N);
+const he = c`
+	:host {
+		width: 1.8em;
+		height: 1.8em;
+	}
+
+	/*svg {
+		color: var(--ur-color-gray-dark);
+	}
+
+	svg:hover {
+		color: var(--ur-color-green);
+	}*/
+`;
+var ce = Object.getOwnPropertyDescriptor, pe = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? ce(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = l(r) || r);
+  return r;
+};
+let R = class extends p {
+  render() {
+    return h`
+			<svg
+				width="32"
+				height="32"
+				viewBox="0 0 32 32"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<g id="Globe / Regular">
+					<path
+						id="Vector"
+						d="M24.75 7.875C24.75 9.32472 25.9253 10.5 27.375 10.5C27.7201 10.5 28 10.7799 28 11.125V20.875C28 21.2201 27.7201 21.5 27.375 21.5C25.9253 21.5 24.75 22.6753 24.75 24.125C24.75 24.4701 24.4701 24.75 24.125 24.75C22.6753 24.75 21.5 25.9253 21.5 27.375C21.5 27.7201 21.2201 28 20.875 28H11.125C10.7799 28 10.5 27.7201 10.5 27.375C10.5 25.9253 9.32472 24.75 7.875 24.75C7.52985 24.75 7.25 24.4701 7.25 24.125C7.25 22.6753 6.07472 21.5 4.625 21.5C4.27985 21.5 4 21.2201 4 20.875V11.125C4 10.7799 4.27985 10.5 4.625 10.5C6.07472 10.5 7.25 9.32472 7.25 7.875C7.25 7.52985 7.52985 7.25 7.875 7.25C9.32472 7.25 10.5 6.07472 10.5 4.625C10.5 4.27985 10.7799 4 11.125 4H20.875C21.2201 4 21.5 4.27985 21.5 4.625C21.5 6.07472 22.6753 7.25 24.125 7.25C24.4701 7.25 24.75 7.52985 24.75 7.875Z"
+						stroke="currentColor"
+						stroke-width="2"
+					/>
+					<ellipse
+						id="Ellipse 1"
+						cx="16"
+						cy="16"
+						rx="4"
+						ry="12"
+						stroke="currentColor"
+						stroke-width="2"
+					/>
+					<path
+						id="Vector 1"
+						d="M4 16H28"
+						stroke="currentColor"
+						stroke-width="2"
+					/>
+				</g>
+			</svg>
+		`;
+  }
+};
+R.styles = [O, he];
+R = pe([
+  d("ur-icon-connect-globe")
+], R);
+const de = c`
+	:host {
+		display: inline-block;
+		position: relative;
+	}
+
+	.menu-container {
+		position: relative;
+	}
+
+	.menu-button {
+		display: inline-block;
+	}
+
+	.menu-items {
+		display: none;
+		position: fixed;
+		z-index: 1000;
+		min-width: 200px;
+		background: color-mix(in srgb, var(--ur-color-black, #101010), #fff 7%);
+		border: 1px solid var(--ur-color-border, #000000);
+		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
+		color: var(--ur-color-white, #ffffff);
+		border-radius: 0.5rem;
+		padding: 0.5rem 0;
+		overflow: hidden;
+	}
+
+	:host([open]) .menu-items {
+		display: flex;
+		flex-flow: column;
+	}
+`;
+var ue = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, I = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? fe(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && ue(t, e, r), r;
+};
+let $ = class extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this._handleButtonClick = (i) => {
+      i.stopPropagation(), this.open = !this.open, this.open && this._updatePosition();
+    }, this._handleMenuClick = (i) => {
+      i.stopPropagation();
+    }, this._handleDocumentClick = () => {
+      this.open && (this.open = !1);
+    }, this._handleMenuItemClick = (i) => {
+      this.open = !1;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleDocumentClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick);
+  }
+  _updatePosition() {
+    requestAnimationFrame(() => {
+      if (!this._buttonSlot || !this._menuItems) return;
+      const i = this._buttonSlot.assignedElements();
+      if (i.length === 0) return;
+      const e = i[0].getBoundingClientRect(), o = this._menuItems.getBoundingClientRect();
+      let r = e.bottom + 8, s = e.left;
+      const l = window.innerWidth, a = window.innerHeight;
+      s + o.width > l - 8 && (s = e.right - o.width), s < 8 && (s = 8), r + o.height > a - 8 && (r = e.top - o.height - 8), this._menuItems.style.top = `${r}px`, this._menuItems.style.left = `${s}px`;
+    });
+  }
+  render() {
+    return h`
+			<div class="menu-container">
+				<div class="menu-button" @click=${this._handleButtonClick}>
+					<slot name="button" class="menu-button-slot"></slot>
+				</div>
+				<div
+					class="menu-items"
+					@click=${this._handleMenuClick}
+					@ur-menu-item-click=${this._handleMenuItemClick}
+				>
+					<slot></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+$.styles = de;
+I([
+  n({ type: Boolean, reflect: !0 })
+], $.prototype, "open", 2);
+I([
+  ot(".menu-button-slot")
+], $.prototype, "_buttonSlot", 2);
+I([
+  ot(".menu-items")
+], $.prototype, "_menuItems", 2);
+$ = I([
+  d("ur-menu")
+], $);
+const ve = c`
+	:host {
+		display: inline-block;
+	}
+
+	.button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		font-family: inherit;
+		font-size: inherit;
+		color: inherit;
+	}
+
+	.button:hover {
+		background-color: var(--ur-color-hover, rgba(0, 0, 0, 0.05));
+	}
+
+	.button:focus-visible {
+		outline: 2px solid var(--ur-color-focus, #000000);
+		outline-offset: 2px;
+	}
+`;
+var me = Object.getOwnPropertyDescriptor, ge = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? me(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = l(r) || r);
+  return r;
+};
+let q = class extends p {
+  render() {
+    return h`
+			<button class="button" part="button">
+				<slot></slot>
+			</button>
+		`;
+  }
+};
+q.styles = ve;
+q = ge([
+  d("ur-menu-button")
+], q);
+const be = c`
+	:host {
+		width: 100%;
+		box-sizing: border-box;
+		display: block;
+	}
+
+	.menu-item-content {
+		width: 100%;
+		padding: var(--ur-space-sm) var(--ur-space-md);
+		cursor: pointer;
+		display: block;
+	}
+
+	:host(:hover) .menu-item-content {
+		background-color: color-mix(
+			in srgb,
+			var(--ur-color-black, #101010),
+			#fff 9%
+		);
+	}
+
+	:host(:not(:last-child)) {
+		border-bottom: 1px solid var(--ur-color-border, rgba(255, 255, 255, 0.1));
+	}
+`;
+var ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, at = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? we(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && ye(t, e, r), r;
+};
+let F = class extends p {
+  constructor() {
+    super(...arguments), this.disabled = !1, this._handleClick = (i) => {
+      if (this.disabled) {
+        i.preventDefault(), i.stopPropagation();
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("ur-menu-item-click", {
+          bubbles: !0,
+          composed: !0,
+          detail: { target: this }
+        })
+      );
+    };
+  }
+  render() {
+    return h`
+			<div class="menu-item-content" @click=${this._handleClick}>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+F.styles = be;
+at([
+  n({ type: Boolean })
+], F.prototype, "disabled", 2);
+F = at([
+  d("ur-menu-item")
+], F);
+const Ce = c`
+	:host {
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.location-list-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		box-sizing: border-box;
+		padding: var(--ur-space-sm) 0;
+	}
+
+	.leading-list-item-content {
+		display: flex;
+		align-items: center;
+	}
+
+	.location-text-content {
+		display: flex;
+		flex-flow: column;
+		align-items: start;
+	}
+
+	.selected-icon {
+		width: 1.6rem;
+		height: 1.6rem;
+		margin-right: 0.3rem;
+	}
+`;
+var ke = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, _ = (i, t, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? _e(t, e) : t, s = i.length - 1, l; s >= 0; s--)
+    (l = i[s]) && (r = (o ? l(t, e, r) : l(r)) || r);
+  return o && r && ke(t, e, r), r;
+};
+let b = class extends p {
+  constructor() {
+    super(...arguments), this.name = "Best available provider", this.providerCount = 0, this.unstable = !1, this.strongPrivacy = !1;
+  }
+  formatNumber(i) {
+    return i.toLocaleString("en-US");
+  }
+  render() {
+    const i = this.locationKey ? lt(this.locationKey) : "#000000";
+    return h`
+			<div class="location-list-item" @click=${this.onClick}>
+				<div class="leading-list-item-content">
+					<ur-icon-connect-globe
+						class="selected-icon"
+						style="color: ${i};"
+					></ur-icon-connect-globe>
+
+					<div class="location-text-content">
+						<ur-text variant="body">${this.name}</ur-text>
+						${this.providerCount > 0 ? h`
+									<ur-text variant="small" color="var(--ur-color-gray)">
+										${this.formatNumber(this.providerCount)}
+										provider${this.providerCount === 1 ? "" : "s"}
+									</ur-text>
+								` : null}
+					</div>
+				</div>
+
+				<div class="trailing-list-item-content">
+					${this.unstable ? h`
+								<ur-icon-network-instability
+									title="This location has network instability"
+								></ur-icon-network-instability>
+							` : null}
+					${this.strongPrivacy ? h`
+								<ur-icon-privacy
+									style="margin-left: 0.5rem;"
+									title="This location offers strong privacy features"
+								></ur-icon-privacy>
+							` : null}
+				</div>
+			</div>
+		`;
+  }
+};
+b.styles = Ce;
+_([
+  n({ type: String })
+], b.prototype, "locationKey", 2);
+_([
+  n({ type: String })
+], b.prototype, "name", 2);
+_([
+  n({ type: Number })
+], b.prototype, "providerCount", 2);
+_([
+  n({ type: Boolean })
+], b.prototype, "unstable", 2);
+_([
+  n({ type: Boolean })
+], b.prototype, "strongPrivacy", 2);
+_([
+  n({ type: Function })
+], b.prototype, "onClick", 2);
+b = _([
+  d("ur-selected-location")
+], b);
+export {
+  Ee as B,
+  Pe as I,
+  g as L,
+  $ as M,
+  b as S,
+  Ze as T,
+  Se as a,
+  Z as b,
+  m as c,
+  R as d,
+  N as e,
+  A as f,
+  z as g,
+  j as h,
+  U as i,
+  u as j,
+  q as k,
+  F as l,
+  P as m,
+  w as n
+};