@ogc-maps/storybook-components 0.8.0 → 0.9.0

package/dist/main.js

@@ -1,19 +1,19 @@
 import { B as rt } from "./BasemapSwitcher-BW7lyZ2Y.js";
 import { C as nt } from "./CollapsibleControl-CGRNPpCw.js";
-import { C as ot, f as ut, a as mt } from "./CoordinateDisplay-PxPmVjpm.js";
+import { C as pt, f as ut, a as mt } from "./CoordinateDisplay-PxPmVjpm.js";
 import { E as ct } from "./ExportButton-CLsWoW4m.js";
 import { F as ht } from "./FeatureDetailPanel-CkFpdEKW.js";
 import { F as bt } from "./FeatureTooltip-Db1LgLQV.js";
 import { L as ft } from "./LayerPanel-SCdJ8948.js";
-import { L as wt } from "./Legend-BiRyrZL1.js";
+import { L as wt } from "./Legend-CwaZA84A.js";
 import { S as Nt } from "./SearchPanel-DtLXMoVs.js";
 import { jsxs as l, jsx as a, Fragment as q } from "react/jsx-runtime";
 import { useId as Ie, useState as A, useRef as ue, useMemo as Ee, useCallback as We, useEffect as X } from "react";
 import { LuInfo as ze } from "react-icons/lu";
 import { J as Fe, j as Pe, i as se, L as Ve, g as _e } from "./cql2-DOJnQwcv.js";
-import { a as Ct, b as St, M as Dt, e as Tt, N as Lt, f as At, c as It, d as Et, h as Ft, O as Pt, P as Mt, k as Ot, l as jt, m as $t, n as Rt, o as Bt, p as qt, q as Ut, r as Gt, s as Wt, t as zt, u as Vt, v as _t, w as Yt, x as Xt, y as Ht, z as Jt, A as Kt, Q as Qt, B as Zt, C as ei, D as ai, E as ti, F as ii, G as ri, H as li, I as ni, K as pi } from "./cql2-DOJnQwcv.js";
-import { s as Ye } from "./index-RzZtWlUz.js";
-import { B as ui, C as mi, a as si, b as ci, D as di, F as hi, c as gi, d as bi, e as yi, G as fi, L as xi, f as wi, g as vi, h as Ni, i as ki, j as Ci, M as Si, N as Di, O as Ti, P as Li, k as Ai, S as Ii, l as Ei, m as Fi, n as Pi, o as Mi, p as Oi, q as ji, r as $i, T as Ri, U as Bi, V as qi, v as Ui } from "./index-RzZtWlUz.js";
+import { a as Ct, b as St, M as Dt, e as Tt, N as Lt, f as At, c as It, d as Et, h as Ft, O as Pt, P as Mt, k as Ot, l as jt, m as $t, n as Rt, o as Bt, p as qt, q as Ut, r as Gt, s as Wt, t as zt, u as Vt, v as _t, w as Yt, x as Xt, y as Ht, z as Jt, A as Kt, Q as Qt, B as Zt, C as ei, D as ai, E as ti, F as ii, G as ri, H as li, I as ni, K as oi } from "./cql2-DOJnQwcv.js";
+import { s as Ye } from "./index-UmK2u6Yd.js";
+import { B as ui, C as mi, a as si, b as ci, D as di, F as hi, c as gi, d as bi, e as yi, G as fi, L as xi, f as wi, g as vi, h as Ni, i as ki, j as Ci, M as Si, N as Di, O as Ti, P as Li, k as Ai, S as Ii, l as Ei, m as Fi, n as Pi, o as Mi, p as Oi, q as ji, r as $i, T as Ri, U as Bi, V as qi, v as Ui } from "./index-UmK2u6Yd.js";
 import './style.css';function Xe({ text: e, id: t }) {
   const i = Ie(), r = t ?? i;
   return /* @__PURE__ */ l("span", { className: "mapui:relative mapui:inline-flex mapui:group", children: [
@@ -41,7 +41,7 @@ import './style.css';function Xe({ text: e, id: t }) {
     )
   ] });
 }
-function D({ label: e, error: t, required: i, description: r, htmlFor: n, children: o }) {
+function D({ label: e, error: t, required: i, description: r, htmlFor: n, children: p }) {
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-1", children: [
       /* @__PURE__ */ l("label", { htmlFor: n, className: "mapui:flex mapui:items-center mapui:gap-1 mapui:text-xs mapui:font-medium mapui:text-gray-700", children: [
@@ -50,7 +50,7 @@ function D({ label: e, error: t, required: i, description: r, htmlFor: n, childr
       ] }),
       r && /* @__PURE__ */ a(Xe, { text: r })
     ] }),
-    o,
+    p,
     t && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:text-red-600", role: "alert", children: t })
   ] });
 }
@@ -131,13 +131,13 @@ function _({
   defaultOpen: i = !1,
   badge: r
 }) {
-  const [n, o] = A(i);
+  const [n, p] = A(i);
   return /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-gray-200", children: [
     /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: () => o((p) => !p),
+        onClick: () => p((o) => !o),
         className: "mapui:flex mapui:w-full mapui:cursor-pointer mapui:items-center mapui:justify-between mapui:rounded mapui:border-none mapui:bg-gray-50 mapui:px-3 mapui:py-2 mapui:text-sm mapui:font-medium mapui:text-gray-700 hover:mapui:bg-gray-100",
         children: [
           /* @__PURE__ */ l("span", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
@@ -159,14 +159,14 @@ function ce({
   testStatus: r = "idle",
   testError: n
 }) {
-  const o = (p) => t({ ...e, ...p });
+  const p = (o) => t({ ...e, ...o });
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ a(D, { label: "ID", required: !0, children: /* @__PURE__ */ a(
       "input",
       {
         type: "text",
         value: e.id,
-        onChange: (p) => o({ id: p.target.value }),
+        onChange: (o) => p({ id: o.target.value }),
         placeholder: "my-source",
         className: H
       }
@@ -178,7 +178,7 @@ function ce({
           {
             type: "url",
             value: e.url,
-            onChange: (p) => o({ url: p.target.value }),
+            onChange: (o) => p({ url: o.target.value }),
             placeholder: "https://example.com/ogcapi",
             className: `${H} mapui:flex-1`
           }
@@ -202,7 +202,7 @@ function ce({
       {
         type: "text",
         value: e.label ?? "",
-        onChange: (p) => o({ label: p.target.value || void 0 }),
+        onChange: (o) => p({ label: o.target.value || void 0 }),
         placeholder: "My OGC API Source",
         className: H
       }
@@ -212,7 +212,7 @@ function ce({
       {
         type: "text",
         value: e.tileMatrixSetId ?? "WebMercatorQuad",
-        onChange: (p) => o({ tileMatrixSetId: p.target.value || void 0 }),
+        onChange: (o) => p({ tileMatrixSetId: o.target.value || void 0 }),
         placeholder: "WebMercatorQuad",
         className: H
       }
@@ -226,7 +226,7 @@ const ee = () => ({
   tileMatrixSetId: "WebMercatorQuad"
 });
 function Va({ sources: e, onChange: t }) {
-  const [i, r] = A(null), [n, o] = A(null), [p, b] = A(!1), [m, w] = A(ee()), [d, f] = A({}), [c, u] = A({}), [s, v] = A(null), N = async (C, L) => {
+  const [i, r] = A(null), [n, p] = A(null), [o, b] = A(!1), [m, w] = A(ee()), [d, f] = A({}), [c, u] = A({}), [s, v] = A(null), N = async (C, L) => {
     f((E) => ({ ...E, [C]: "loading" }));
     try {
       const E = await fetch(`${L}/conformance`);
@@ -235,7 +235,7 @@ function Va({ sources: e, onChange: t }) {
       f((y) => ({ ...y, [C]: "error" })), u((y) => ({ ...y, [C]: E instanceof Error ? E.message : "Network error" }));
     }
   }, S = () => {
-    n && (t(e.map((C) => C.id === i ? n : C)), r(null), o(null));
+    n && (t(e.map((C) => C.id === i ? n : C)), r(null), p(null));
   }, x = () => {
     t([...e, m]), b(!1), w(ee());
   }, P = (C) => {
@@ -256,7 +256,7 @@ function Va({ sources: e, onChange: t }) {
         }
       )
     ] }),
-    e.length === 0 && !p && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
+    e.length === 0 && !o && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No sources configured." }),
     /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((C) => /* @__PURE__ */ a(
       "li",
       {
@@ -266,7 +266,7 @@ function Va({ sources: e, onChange: t }) {
             ce,
             {
               value: n ?? C,
-              onChange: o,
+              onChange: p,
               onTestConnection: (L) => N(`edit-${C.id}`, L),
               testStatus: d[`edit-${C.id}`],
               testError: c[`edit-${C.id}`]
@@ -288,7 +288,7 @@ function Va({ sources: e, onChange: t }) {
               {
                 type: "button",
                 onClick: () => {
-                  r(null), o(null);
+                  r(null), p(null);
                 },
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
                 children: "Cancel"
@@ -310,7 +310,7 @@ function Va({ sources: e, onChange: t }) {
               {
                 type: "button",
                 onClick: () => {
-                  r(C.id), o(C);
+                  r(C.id), p(C);
                 },
                 className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
                 children: "Edit"
@@ -330,7 +330,7 @@ function Va({ sources: e, onChange: t }) {
       },
       C.id
     )) }),
-    p && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    o && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Source" }),
       /* @__PURE__ */ a(
         ce,
@@ -382,13 +382,13 @@ function _a({
   onSelect: i,
   onDeselect: r
 }) {
-  const { collections: n, loading: o, error: p } = Fe(e || null);
-  return o ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
+  const { collections: n, loading: p, error: o } = Fe(e || null);
+  return p ? /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:py-4 mapui:text-sm mapui:text-gray-500", children: [
     /* @__PURE__ */ a("span", { className: "mapui:inline-block mapui:h-4 mapui:w-4 mapui:animate-spin mapui:rounded-full mapui:border-2 mapui:border-gray-300 mapui:border-t-blue-600" }),
     "Loading collections…"
-  ] }) : p ? /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
+  ] }) : o ? /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:bg-red-50 mapui:p-3 mapui:text-sm mapui:text-red-700", children: [
     "Failed to load collections: ",
-    p.message
+    o.message
   ] }) : n.length === 0 ? /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No collections found at this source." }) : /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-1 mapui:p-0", children: n.map((b) => {
     const m = t.includes(b.id);
     return /* @__PURE__ */ l(
@@ -425,24 +425,24 @@ function _a({
   }) });
 }
 function He({ value: e, onChange: t, availableIcons: i }) {
-  const [r, n] = A(!1), [o, p] = A(-1), b = ue(null), m = Ie(), w = o >= 0 ? `${m}-option-${o}` : void 0, d = Ee(() => {
+  const [r, n] = A(!1), [p, o] = A(-1), b = ue(null), m = Ie(), w = p >= 0 ? `${m}-option-${p}` : void 0, d = Ee(() => {
     if (!i || i.length === 0) return [];
     if (!e) return i;
     const N = e.toLowerCase();
     return i.filter((S) => S.toLowerCase().includes(N));
   }, [i, e]), f = r && d.length > 0, c = We(
     (N) => {
-      t(N), n(!1), p(-1);
+      t(N), n(!1), o(-1);
     },
     [t]
   ), u = (N) => {
-    t(N.target.value), n(!0), p(-1);
+    t(N.target.value), n(!0), o(-1);
   }, s = (N) => {
-    f && (N.key === "ArrowDown" ? (N.preventDefault(), p((S) => Math.min(S + 1, d.length - 1))) : N.key === "ArrowUp" ? (N.preventDefault(), p((S) => Math.max(S - 1, 0))) : N.key === "Enter" && o >= 0 ? (N.preventDefault(), c(d[o])) : N.key === "Escape" && (n(!1), p(-1)));
+    f && (N.key === "ArrowDown" ? (N.preventDefault(), o((S) => Math.min(S + 1, d.length - 1))) : N.key === "ArrowUp" ? (N.preventDefault(), o((S) => Math.max(S - 1, 0))) : N.key === "Enter" && p >= 0 ? (N.preventDefault(), c(d[p])) : N.key === "Escape" && (n(!1), o(-1)));
   };
   X(() => {
     const N = (S) => {
-      b.current && !b.current.contains(S.target) && (n(!1), p(-1));
+      b.current && !b.current.contains(S.target) && (n(!1), o(-1));
     };
     return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
   }, []);
@@ -485,11 +485,11 @@ function He({ value: e, onChange: t, availableIcons: i }) {
           {
             id: `${m}-option-${S}`,
             role: "option",
-            "aria-selected": S === o,
+            "aria-selected": S === p,
             onMouseDown: (x) => {
               x.preventDefault(), c(N);
             },
-            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm mapui:font-mono ${S === o ? "mapui:bg-blue-100" : "hover:mapui:bg-gray-50"}`,
+            className: `mapui:cursor-pointer mapui:px-2 mapui:py-1 mapui:text-sm mapui:font-mono ${S === p ? "mapui:bg-blue-100" : "hover:mapui:bg-gray-50"}`,
             children: N
           },
           `${S}-${N}`
@@ -547,7 +547,7 @@ function Ze({
   availableProperties: i = [],
   onFetchDistinctValues: r
 }) {
-  const [n, o] = A(() => Je(e)), [p, b] = A(!1), m = Ke(e), w = Qe(e), d = n === "match" ? m.property : "", f = n === "match" ? m.pairs : [], c = n === "match" ? m.fallback : "#000000", u = n === "interpolate" ? w.property : "", s = n === "interpolate" ? w.stops : [], v = i.filter(
+  const [n, p] = A(() => Je(e)), [o, b] = A(!1), m = Ke(e), w = Qe(e), d = n === "match" ? m.property : "", f = n === "match" ? m.pairs : [], c = n === "match" ? m.fallback : "#000000", u = n === "interpolate" ? w.property : "", s = n === "interpolate" ? w.stops : [], v = i.filter(
     (h) => !h.type || h.type === "string"
   ), N = i.filter(
     (h) => h.type === "number" || h.type === "integer"
@@ -600,7 +600,7 @@ function Ze({
     const h = ((I = s[s.length - 1]) == null ? void 0 : I.stop) ?? 0, T = [...s, { stop: h + 10, color: ae(s.length) }];
     M(u, T);
   }, B = (h) => {
-    o(h), t(h === "match" ? he("", [], "#000000") : ge("", []));
+    p(h), t(h === "match" ? he("", [], "#000000") : ge("", []));
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
     /* @__PURE__ */ a("div", { className: "mapui:flex mapui:overflow-hidden mapui:rounded mapui:border mapui:border-gray-300", children: ["match", "interpolate"].map((h) => /* @__PURE__ */ a(
@@ -662,9 +662,9 @@ function Ze({
           {
             type: "button",
             onClick: $,
-            disabled: p,
+            disabled: o,
             className: te,
-            children: p ? "Loading…" : "Auto-populate"
+            children: o ? "Loading…" : "Auto-populate"
           }
         )
       ] })
@@ -767,9 +767,9 @@ function ye({
   onChange: i,
   availableIcons: r,
   availableProperties: n,
-  onFetchDistinctValues: o
+  onFetchDistinctValues: p
 }) {
-  var p, b;
+  var o, b;
   switch (e.widget) {
     case "color": {
       const m = Array.isArray(t), w = m ? t[t.length - 1] ?? "#000000" : "#000000";
@@ -796,7 +796,7 @@ function ye({
             value: t,
             onChange: (d) => i(d),
             availableProperties: n,
-            onFetchDistinctValues: o
+            onFetchDistinctValues: p
           }
         ) : /* @__PURE__ */ a(
           Y,
@@ -843,7 +843,7 @@ function ye({
       return /* @__PURE__ */ a(
         "select",
         {
-          value: t ?? ((p = e.options) == null ? void 0 : p[0]) ?? "",
+          value: t ?? ((o = e.options) == null ? void 0 : o[0]) ?? "",
           onChange: (m) => i(m.target.value),
           className: z,
           children: (b = e.options) == null ? void 0 : b.map((m) => /* @__PURE__ */ a("option", { value: m, children: m }, m))
@@ -907,9 +907,9 @@ function ye({
       return null;
   }
 }
-function ta({ def: e, value: t, onChange: i, availableIcons: r, availableProperties: n, onFetchDistinctValues: o }) {
-  const p = e.enableDefault !== void 0, b = t !== void 0;
-  if (p && e.widget === "boolean") {
+function ta({ def: e, value: t, onChange: i, availableIcons: r, availableProperties: n, onFetchDistinctValues: p }) {
+  const o = e.enableDefault !== void 0, b = t !== void 0;
+  if (o && e.widget === "boolean") {
     const m = !e.enableDefault;
     return /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
       "input",
@@ -923,7 +923,7 @@ function ta({ def: e, value: t, onChange: i, availableIcons: r, availablePropert
       }
     ) });
   }
-  return p ? /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+  return o ? /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
     /* @__PURE__ */ a(
       "input",
       {
@@ -943,7 +943,7 @@ function ta({ def: e, value: t, onChange: i, availableIcons: r, availablePropert
         onChange: (m) => i(e.key, m),
         availableIcons: r,
         availableProperties: n,
-        onFetchDistinctValues: o
+        onFetchDistinctValues: p
       }
     )
   ] }) }) : /* @__PURE__ */ a(D, { label: e.label, description: e.description, children: /* @__PURE__ */ a(
@@ -954,7 +954,7 @@ function ta({ def: e, value: t, onChange: i, availableIcons: r, availablePropert
       onChange: (m) => i(e.key, m),
       availableIcons: r,
       availableProperties: n,
-      onFetchDistinctValues: o
+      onFetchDistinctValues: p
     }
   ) });
 }
@@ -964,8 +964,8 @@ function fe({
   values: i,
   onChange: r,
   defaultOpen: n = !1,
-  availableIcons: o,
-  availableProperties: p,
+  availableIcons: p,
+  availableProperties: o,
   onFetchDistinctValues: b
 }) {
   const m = t.filter(
@@ -977,8 +977,8 @@ function fe({
       def: w,
       value: i[w.key],
       onChange: r,
-      availableIcons: o,
-      availableProperties: p,
+      availableIcons: p,
+      availableProperties: o,
       onFetchDistinctValues: b
     },
     w.key
@@ -1010,8 +1010,8 @@ function ra(e) {
   if (e[0] === "match") {
     const t = [];
     for (let r = 2; r < e.length - 1; r += 2) {
-      const n = String(e[r]), o = e[r + 1];
-      typeof o == "string" && t.push({ label: n, color: o });
+      const n = String(e[r]), p = e[r + 1];
+      typeof p == "string" && t.push({ label: n, color: p });
     }
     const i = e[e.length - 1];
     return typeof i == "string" && t.push({ label: "Other", color: i }), t;
@@ -1042,7 +1042,7 @@ function na(e) {
       return e.paint["text-color"] ?? e.paint["icon-color"] ?? "#000000";
   }
 }
-function pa(e) {
+function oa(e) {
   switch (e.type) {
     case "fill":
       return "square";
@@ -1063,7 +1063,7 @@ function ie({ expr: e, height: t }) {
         title: "Expression (no preview)"
       }
     );
-  const r = e[0] === "interpolate", n = r ? `linear-gradient(to right, ${i.join(", ")})` : i.map((o, p) => `${o} ${p / i.length * 100}% ${(p + 1) / i.length * 100}%`).join(", ");
+  const r = e[0] === "interpolate", n = r ? `linear-gradient(to right, ${i.join(", ")})` : i.map((p, o) => `${p} ${o / i.length * 100}% ${(o + 1) / i.length * 100}%`).join(", ");
   return /* @__PURE__ */ a(
     "div",
     {
@@ -1080,7 +1080,7 @@ function ie({ expr: e, height: t }) {
 function xe(e, t) {
   return typeof e == "string" ? e : W(e) ? Me(e)[0] ?? t : t;
 }
-function oa({ style: e }) {
+function pa({ style: e }) {
   if (e.type === "fill") {
     const r = e.paint["fill-color"];
     return /* @__PURE__ */ a(
@@ -1309,7 +1309,7 @@ const fa = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py
   circle: "Circle",
   symbol: "Symbol"
 }, xa = ["text", "icon", "both"];
-function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availableIcons: n, availableProperties: o, onFetchDistinctValues: p }) {
+function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availableIcons: n, availableProperties: p, onFetchDistinctValues: o }) {
   const b = r ?? (i ? [i] : []), [m, w] = A(() => ve(e));
   X(() => {
     w(ve(e));
@@ -1390,7 +1390,7 @@ function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availa
     )) }) }),
     /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-gray-100 mapui:p-2", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-1 mapui:text-xs mapui:text-gray-500", children: "Preview" }),
-      /* @__PURE__ */ a(oa, { style: e })
+      /* @__PURE__ */ a(pa, { style: e })
     ] }),
     E.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-xs mapui:font-medium mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Layout" }),
@@ -1403,8 +1403,8 @@ function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availa
           onChange: u,
           defaultOpen: $ === 0,
           availableIcons: n,
-          availableProperties: o,
-          onFetchDistinctValues: p
+          availableProperties: p,
+          onFetchDistinctValues: o
         },
         y
       ))
@@ -1420,8 +1420,8 @@ function wa({ value: e, onChange: t, suggestedType: i, suggestedTypes: r, availa
           onChange: c,
           defaultOpen: !1,
           availableIcons: n,
-          availableProperties: o,
-          onFetchDistinctValues: p
+          availableProperties: p,
+          onFetchDistinctValues: o
         },
         y
       ))
@@ -1466,12 +1466,12 @@ function va({ value: e, onChange: t }) {
 }
 const ke = () => ({ label: "", color: "#4a90d9", shape: "square" }), re = 8, Ce = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
 function Na({ value: e, onChange: t, styles: i }) {
-  const r = (e == null ? void 0 : e.entries) ?? [], n = (e == null ? void 0 : e.displayMode) ?? "simple", o = Ee(() => {
+  const r = (e == null ? void 0 : e.entries) ?? [], n = (e == null ? void 0 : e.displayMode) ?? "simple", p = Ee(() => {
     if (!i || i.length === 0) return null;
     const c = [];
     let u = "simple", s = null;
     for (const v of i) {
-      const N = na(v), S = pa(v);
+      const N = na(v), S = oa(v);
       if (W(N)) {
         const x = ia(N);
         if (!x) continue;
@@ -1480,7 +1480,7 @@ function Na({ value: e, onChange: t, styles: i }) {
       } else typeof N == "string" && c.push({ label: v.type, color: N, shape: S });
     }
     return c.length === 0 ? null : { entries: c, mode: u, property: s };
-  }, [i]), p = () => {
+  }, [i]), o = () => {
     t({ ...e, entries: [...r, ke()] });
   }, b = (c, u) => {
     const s = r.map((v, N) => N === c ? u : v);
@@ -1491,16 +1491,16 @@ function Na({ value: e, onChange: t, styles: i }) {
   }, w = (c) => {
     t(c ? { entries: [ke()] } : void 0);
   }, d = () => {
-    o && t({
-      entries: o.entries,
-      displayMode: o.mode,
-      ...o.mode === "gradient" && o.property ? { gradientProperty: o.property } : {},
-      ...o.mode === "categorical" ? { showLabelsCollapsed: !1 } : {}
+    p && t({
+      entries: p.entries,
+      displayMode: p.mode,
+      ...p.mode === "gradient" && p.property ? { gradientProperty: p.property } : {},
+      ...p.mode === "categorical" ? { showLabelsCollapsed: !1 } : {}
     });
   }, f = (c) => {
     if (!e) return;
     const u = { ...e, displayMode: c };
-    c !== "categorical" && delete u.showLabelsCollapsed, c !== "gradient" && delete u.gradientProperty, t(u);
+    c !== "categorical" && delete u.showLabelsCollapsed, c !== "categorical" && delete u.showColorBar, c !== "gradient" && delete u.gradientProperty, c === "simple" && delete u.showDisclosureArrow, t(u);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
@@ -1516,10 +1516,10 @@ function Na({ value: e, onChange: t, styles: i }) {
       ),
       /* @__PURE__ */ a("label", { htmlFor: "legend-enabled", className: "mapui:text-sm mapui:font-medium mapui:text-gray-700", children: "Enable Legend" })
     ] }),
-    e === void 0 && o && o.entries.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
-      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-blue-800", children: o.mode !== "simple" ? `This layer uses data-driven colors (${o.entries.length} ${o.entries.length === 1 ? "category" : "categories"})` : `This layer has ${o.entries.length} style ${o.entries.length === 1 ? "color" : "colors"}` }),
+    e === void 0 && p && p.entries.length > 0 && /* @__PURE__ */ l("div", { className: "mapui:rounded mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+      /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-blue-800", children: p.mode !== "simple" ? `This layer uses data-driven colors (${p.entries.length} ${p.entries.length === 1 ? "category" : "categories"})` : `This layer has ${p.entries.length} style ${p.entries.length === 1 ? "color" : "colors"}` }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-2 mapui:flex mapui:flex-wrap mapui:items-center mapui:gap-1.5", children: [
-        o.entries.slice(0, re).map((c, u) => /* @__PURE__ */ l(
+        p.entries.slice(0, re).map((c, u) => /* @__PURE__ */ l(
           "div",
           {
             className: "mapui:flex mapui:items-center mapui:gap-1",
@@ -1537,9 +1537,9 @@ function Na({ value: e, onChange: t, styles: i }) {
           },
           `${c.label}-${u}`
         )),
-        o.entries.length > re && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-blue-600", children: [
+        p.entries.length > re && /* @__PURE__ */ l("span", { className: "mapui:text-xs mapui:text-blue-600", children: [
           "+",
-          o.entries.length - re,
+          p.entries.length - re,
           " more"
         ] })
       ] }),
@@ -1584,6 +1584,32 @@ function Na({ value: e, onChange: t, styles: i }) {
         ),
         /* @__PURE__ */ a("label", { htmlFor: "legend-show-labels-collapsed", className: "mapui:text-sm mapui:text-gray-700", children: "Show labels in collapsed view" })
       ] }),
+      n === "categorical" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "legend-show-color-bar",
+            checked: e.showColorBar !== !1,
+            onChange: (c) => t({ ...e, showColorBar: c.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "legend-show-color-bar", className: "mapui:text-sm mapui:text-gray-700", children: "Show color bar" })
+      ] }),
+      (n === "categorical" || n === "gradient") && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "checkbox",
+            id: "legend-show-disclosure-arrow",
+            checked: e.showDisclosureArrow !== !1,
+            onChange: (c) => t({ ...e, showDisclosureArrow: c.target.checked }),
+            className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
+          }
+        ),
+        /* @__PURE__ */ a("label", { htmlFor: "legend-show-disclosure-arrow", className: "mapui:text-sm mapui:text-gray-700", children: "Show disclosure arrow" })
+      ] }),
       n === "gradient" && /* @__PURE__ */ l("div", { className: "mapui:flex mapui:items-center mapui:gap-2", children: [
         /* @__PURE__ */ a("label", { htmlFor: "legend-gradient-property", className: "mapui:text-sm mapui:text-gray-700", children: "Gradient Property" }),
         /* @__PURE__ */ a(
@@ -1634,12 +1660,12 @@ function Na({ value: e, onChange: t, styles: i }) {
           "button",
           {
             type: "button",
-            onClick: p,
+            onClick: o,
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
             children: "+ Add Entry"
           }
         ),
-        o && o.entries.length > 0 && /* @__PURE__ */ l(
+        p && p.entries.length > 0 && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
@@ -1647,7 +1673,7 @@ function Na({ value: e, onChange: t, styles: i }) {
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-blue-300 mapui:bg-white mapui:px-3 mapui:py-2 mapui:text-sm mapui:font-medium mapui:text-blue-700 hover:mapui:bg-blue-50",
             children: [
               "Populate from Style (",
-              o.entries.length,
+              p.entries.length,
               " entries)"
             ]
           }
@@ -1662,18 +1688,18 @@ function Se({
   placeholder: i,
   className: r
 }) {
-  const [n, o] = A(() => (e == null ? void 0 : e.join(", ")) ?? "");
+  const [n, p] = A(() => (e == null ? void 0 : e.join(", ")) ?? "");
   return X(() => {
-    o((e == null ? void 0 : e.join(", ")) ?? "");
+    p((e == null ? void 0 : e.join(", ")) ?? "");
   }, [e == null ? void 0 : e.join(",")]), /* @__PURE__ */ a(
     "input",
     {
       type: "text",
       value: n,
-      onChange: (b) => o(b.target.value),
+      onChange: (b) => p(b.target.value),
       onBlur: () => {
         const b = n.trim(), m = b ? b.split(",").map((w) => w.trim()).filter(Boolean) : void 0;
-        t(m), o((m == null ? void 0 : m.join(", ")) ?? "");
+        t(m), p((m == null ? void 0 : m.join(", ")) ?? "");
       },
       placeholder: i,
       className: r
@@ -1687,15 +1713,15 @@ const R = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-
   select: { type: "select", property: "", label: "" }
 };
 function Ca({ value: e, onChange: t, availableProperties: i }) {
-  const r = (p) => {
-    t({ ...ka[p], property: e.property, label: e.label });
-  }, n = (p) => t({ ...e, ...p }), o = i && i.length > 0;
+  const r = (o) => {
+    t({ ...ka[o], property: e.property, label: e.label });
+  }, n = (o) => t({ ...e, ...o }), p = i && i.length > 0;
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-3", children: [
     /* @__PURE__ */ a(D, { label: "Field Type", children: /* @__PURE__ */ l(
       "select",
       {
         value: e.type,
-        onChange: (p) => r(p.target.value),
+        onChange: (o) => r(o.target.value),
         className: R,
         children: [
           /* @__PURE__ */ a("option", { value: "text", children: "Text" }),
@@ -1705,15 +1731,15 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ a(D, { label: "Property", required: !0, children: o ? /* @__PURE__ */ l(
+    /* @__PURE__ */ a(D, { label: "Property", required: !0, children: p ? /* @__PURE__ */ l(
       "select",
       {
         value: e.property,
-        onChange: (p) => n({ property: p.target.value }),
+        onChange: (o) => n({ property: o.target.value }),
         className: R,
         children: [
           /* @__PURE__ */ a("option", { value: "", children: "Select a property…" }),
-          i.map((p) => /* @__PURE__ */ a("option", { value: p.name, children: p.title ?? p.name }, p.name))
+          i.map((o) => /* @__PURE__ */ a("option", { value: o.name, children: o.title ?? o.name }, o.name))
         ]
       }
     ) : /* @__PURE__ */ a(
@@ -1721,7 +1747,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
       {
         type: "text",
         value: e.property,
-        onChange: (p) => n({ property: p.target.value }),
+        onChange: (o) => n({ property: o.target.value }),
         placeholder: "e.g. name",
         className: R
       }
@@ -1731,7 +1757,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
       {
         type: "text",
         value: e.label,
-        onChange: (p) => n({ label: p.target.value }),
+        onChange: (o) => n({ label: o.target.value }),
         placeholder: "Display label",
         className: R
       }
@@ -1741,7 +1767,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
       {
         type: "text",
         value: e.placeholder ?? "",
-        onChange: (p) => n({ placeholder: p.target.value || void 0 }),
+        onChange: (o) => n({ placeholder: o.target.value || void 0 }),
         placeholder: "Input placeholder text",
         className: R
       }
@@ -1754,7 +1780,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "text-autocomplete",
             checked: e.autocomplete ?? !1,
-            onChange: (p) => t({ ...e, autocomplete: p.target.checked }),
+            onChange: (o) => t({ ...e, autocomplete: o.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
@@ -1767,7 +1793,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "text-prefetch",
             checked: e.prefetch ?? !1,
-            onChange: (p) => t({ ...e, prefetch: p.target.checked }),
+            onChange: (o) => t({ ...e, prefetch: o.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
@@ -1777,7 +1803,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         Se,
         {
           options: e.options,
-          onChange: (p) => t({ ...e, options: p }),
+          onChange: (o) => t({ ...e, options: o }),
           placeholder: "option1, option2",
           className: R
         }
@@ -1788,9 +1814,9 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         "select",
         {
           value: e.inputMode ?? "input",
-          onChange: (p) => t({
+          onChange: (o) => t({
             ...e,
-            inputMode: p.target.value
+            inputMode: o.target.value
           }),
           className: R,
           children: [
@@ -1803,9 +1829,9 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         "select",
         {
           value: e.operator ?? "eq",
-          onChange: (p) => t({
+          onChange: (o) => t({
             ...e,
-            operator: p.target.value
+            operator: o.target.value
           }),
           className: R,
           children: [
@@ -1824,9 +1850,9 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           {
             type: "number",
             value: e.min ?? "",
-            onChange: (p) => t({
+            onChange: (o) => t({
               ...e,
-              min: p.target.value ? parseFloat(p.target.value) : void 0
+              min: o.target.value ? parseFloat(o.target.value) : void 0
             }),
             className: R
           }
@@ -1836,9 +1862,9 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           {
             type: "number",
             value: e.max ?? "",
-            onChange: (p) => t({
+            onChange: (o) => t({
               ...e,
-              max: p.target.value ? parseFloat(p.target.value) : void 0
+              max: o.target.value ? parseFloat(o.target.value) : void 0
             }),
             className: R
           }
@@ -1848,9 +1874,9 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           {
             type: "number",
             value: e.step ?? "",
-            onChange: (p) => t({
+            onChange: (o) => t({
               ...e,
-              step: p.target.value ? parseFloat(p.target.value) : void 0
+              step: o.target.value ? parseFloat(o.target.value) : void 0
             }),
             className: R
           }
@@ -1864,7 +1890,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
           type: "checkbox",
           id: "datetime-range",
           checked: e.range ?? !1,
-          onChange: (p) => t({ ...e, range: p.target.checked }),
+          onChange: (o) => t({ ...e, range: o.target.checked }),
           className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
         }
       ),
@@ -1878,7 +1904,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
             type: "checkbox",
             id: "select-prefetch",
             checked: e.prefetch ?? !1,
-            onChange: (p) => t({ ...e, prefetch: p.target.checked }),
+            onChange: (o) => t({ ...e, prefetch: o.target.checked }),
             className: "mapui:h-4 mapui:w-4 mapui:accent-blue-600"
           }
         ),
@@ -1888,7 +1914,7 @@ function Ca({ value: e, onChange: t, availableProperties: i }) {
         Se,
         {
           options: e.options,
-          onChange: (p) => t({ ...e, options: p }),
+          onChange: (o) => t({ ...e, options: o }),
           placeholder: "option1, option2",
           className: R
         }
@@ -1903,10 +1929,10 @@ const Sa = () => ({
   autocomplete: !1
 });
 function Da({ fields: e, onChange: t, availableProperties: i }) {
-  const [r, n] = A(null), o = () => {
+  const [r, n] = A(null), p = () => {
     const d = [...e, Sa()];
     t(d), n(d.length - 1);
-  }, p = (d, f) => {
+  }, o = (d, f) => {
     t(e.map((c, u) => u === d ? f : c));
   }, b = (d) => {
     t(e.filter((f, c) => c !== d)), n(null);
@@ -1974,7 +2000,7 @@ function Da({ fields: e, onChange: t, availableProperties: i }) {
         Ca,
         {
           value: d,
-          onChange: (c) => p(f, c),
+          onChange: (c) => o(f, c),
           availableProperties: i
         }
       ) })
@@ -1983,7 +2009,7 @@ function Da({ fields: e, onChange: t, availableProperties: i }) {
       "button",
       {
         type: "button",
-        onClick: o,
+        onClick: p,
         className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
         children: "+ Add Search Field"
       }
@@ -2008,23 +2034,23 @@ function La(e) {
 }
 const le = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
 function Aa({ value: e, onChange: t, availableProperties: i }) {
-  const r = Ta(e), n = i && i.length > 0, o = (u) => t(La(u)), p = () => {
-    o([...r, { key: "", label: "", visible: !0 }]);
+  const r = Ta(e), n = i && i.length > 0, p = (u) => t(La(u)), o = () => {
+    p([...r, { key: "", label: "", visible: !0 }]);
   }, b = (u) => {
-    o(r.filter((s, v) => v !== u));
+    p(r.filter((s, v) => v !== u));
   }, m = (u, s) => {
-    o(r.map((v, N) => N === u ? { ...v, ...s } : v));
+    p(r.map((v, N) => N === u ? { ...v, ...s } : v));
   }, w = (u, s) => {
     const v = i == null ? void 0 : i.find((S) => S.name === s), N = (v == null ? void 0 : v.title) ?? r[u].label;
-    o(r.map((S, x) => x === u ? { ...S, key: s, label: N } : S));
+    p(r.map((S, x) => x === u ? { ...S, key: s, label: N } : S));
   }, d = (u) => {
     if (u === 0) return;
     const s = [...r];
-    [s[u - 1], s[u]] = [s[u], s[u - 1]], o(s);
+    [s[u - 1], s[u]] = [s[u], s[u - 1]], p(s);
   }, f = (u) => {
     if (u === r.length - 1) return;
     const s = [...r];
-    [s[u], s[u + 1]] = [s[u + 1], s[u]], o(s);
+    [s[u], s[u + 1]] = [s[u + 1], s[u]], p(s);
   }, c = () => {
     if (!i) return;
     const u = i.map((s) => ({
@@ -2032,7 +2058,7 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
       label: s.title ?? "",
       visible: !0
     }));
-    o(u);
+    p(u);
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-2", children: [
     r.length === 0 ? /* @__PURE__ */ l(q, { children: [
@@ -2139,7 +2165,7 @@ function Aa({ value: e, onChange: t, availableProperties: i }) {
       "button",
       {
         type: "button",
-        onClick: p,
+        onClick: o,
         className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-dashed mapui:border-gray-300 mapui:px-3 mapui:py-2 mapui:text-sm mapui:text-gray-600 hover:mapui:border-blue-400 hover:mapui:text-blue-600",
         children: "+ Add Property"
       }
@@ -2199,8 +2225,8 @@ function Ue(e) {
 function Pa(e) {
   const t = /* @__PURE__ */ new Set();
   for (const n of e) {
-    const o = n.toLowerCase();
-    o.includes("polygon") ? t.add("polygon") : o.includes("linestring") ? t.add("line") : o.includes("point") && t.add("point");
+    const p = n.toLowerCase();
+    p.includes("polygon") ? t.add("polygon") : p.includes("linestring") ? t.add("line") : p.includes("point") && t.add("point");
   }
   const i = t.size > 1, r = [];
   return t.has("polygon") && r.push({
@@ -2220,13 +2246,13 @@ function Pa(e) {
 async function Ya(e, t) {
   var i, r;
   try {
-    const n = await Pe(e, t), o = Ea(n);
-    if (o) return o;
+    const n = await Pe(e, t), p = Ea(n);
+    if (p) return p;
   } catch {
   }
   try {
-    const o = (r = (i = (await se(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
-    if (typeof o == "string") return Re(o);
+    const p = (r = (i = (await se(e, t, { limit: 1 })).features[0]) == null ? void 0 : i.geometry) == null ? void 0 : r.type;
+    if (typeof p == "string") return Re(p);
   } catch {
   }
   return null;
@@ -2239,9 +2265,9 @@ async function Xa(e, t) {
   }
   try {
     const i = await se(e, t, { limit: 20 }), r = Ue(i.features), n = /* @__PURE__ */ new Set();
-    for (const o of r)
-      for (const p of Be(o))
-        n.add(p);
+    for (const p of r)
+      for (const o of Be(p))
+        n.add(o);
     return Array.from(n);
   } catch {
   }
@@ -2260,10 +2286,10 @@ function Oa(e, t) {
 const V = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
 function De({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
   var S;
-  const n = (x) => t({ ...e, ...x }), o = ue(e);
-  o.current = e;
-  const p = ue(t);
-  p.current = t;
+  const n = (x) => t({ ...e, ...x }), p = ue(e);
+  p.current = e;
+  const o = ue(t);
+  o.current = t;
   const b = i.find((x) => x.id === e.sourceId), m = (b == null ? void 0 : b.url) ?? null, w = e.collection || null, { collections: d, loading: f } = Fe(m), { queryables: c, loading: u } = Ve(m, w), s = c ? Fa(c) : [], [v, N] = A([]);
   return X(() => {
     if (!c) {
@@ -2273,7 +2299,7 @@ function De({ value: e, onChange: t, availableSources: i, availableIcons: r }) {
     const x = (L) => {
       var y;
       const E = Pa(L);
-      N(E), E.length > 0 && !((y = o.current.styles) != null && y.length) && p.current({ ...o.current, styles: E });
+      N(E), E.length > 0 && !((y = p.current.styles) != null && y.length) && o.current({ ...p.current, styles: E });
     }, P = qe(c);
     if (P.length > 0) {
       const L = [];
@@ -2463,12 +2489,12 @@ const ne = () => ({
   dataMode: "vector-tiles"
 });
 function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r }) {
-  const [n, o] = A(null), [p, b] = A(!1), [m, w] = A(ne()), [d, f] = A(null), [c, u] = A(null), [s, v] = A(null), N = () => {
+  const [n, p] = A(null), [o, b] = A(!1), [m, w] = A(ne()), [d, f] = A(null), [c, u] = A(null), [s, v] = A(null), N = () => {
     t([...e, m]), b(!1), w(ne());
   }, S = (g) => {
     t(e.map((k) => k.id === n ? g : k));
   }, x = (g) => {
-    t(e.filter((k) => k.id !== g)), f(null), n === g && o(null);
+    t(e.filter((k) => k.id !== g)), f(null), n === g && p(null);
   }, P = (g) => {
     if (g === 0) return;
     const k = [...e];
@@ -2509,7 +2535,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
         }
       )
     ] }),
-    e.length === 0 && !p && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
+    e.length === 0 && !o && /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:text-sm mapui:text-gray-500", children: "No layers configured." }),
     /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:flex mapui:flex-col mapui:gap-2 mapui:p-0", children: e.map((g, k) => {
       var B, h, T, I, F;
       const O = c === g.id, U = s === g.id, G = n === g.id;
@@ -2585,7 +2611,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
                   "button",
                   {
                     type: "button",
-                    onClick: () => o(n === g.id ? null : g.id),
+                    onClick: () => p(n === g.id ? null : g.id),
                     className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-200 mapui:bg-white mapui:px-2 mapui:py-1 mapui:text-xs mapui:text-gray-600 hover:mapui:bg-gray-50",
                     children: n === g.id ? "Close" : "Edit"
                   }
@@ -2615,7 +2641,7 @@ function Ja({ layers: e, onChange: t, availableSources: i, availableIcons: r })
         g.id
       );
     }) }),
-    p && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
+    o && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Layer" }),
       /* @__PURE__ */ a(
         De,
@@ -2716,12 +2742,12 @@ function Te({ value: e, onChange: t }) {
     ] })
   ] });
 }
-const pe = () => ({ id: "", label: "", url: "" });
+const oe = () => ({ id: "", label: "", url: "" });
 function Ka({ basemaps: e, onChange: t }) {
-  const [i, r] = A(null), [n, o] = A(!1), [p, b] = A(pe()), [m, w] = A(null), d = (u) => {
+  const [i, r] = A(null), [n, p] = A(!1), [o, b] = A(oe()), [m, w] = A(null), d = (u) => {
     t(e.map((s) => s.id === i ? u : s));
   }, f = () => {
-    t([...e, p]), o(!1), b(pe());
+    t([...e, o]), p(!1), b(oe());
   }, c = (u) => {
     t(e.filter((s) => s.id !== u)), w(null);
   };
@@ -2733,7 +2759,7 @@ function Ka({ basemaps: e, onChange: t }) {
         {
           type: "button",
           onClick: () => {
-            o(!0), b(pe());
+            p(!0), b(oe());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Basemap"
@@ -2787,14 +2813,14 @@ function Ka({ basemaps: e, onChange: t }) {
     )) }),
     n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Basemap" }),
-      /* @__PURE__ */ a(Te, { value: p, onChange: b }),
+      /* @__PURE__ */ a(Te, { value: o, onChange: b }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: f,
-            disabled: !p.id || !p.url,
+            disabled: !o.id || !o.url,
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -2803,7 +2829,7 @@ function Ka({ basemaps: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: () => o(!1),
+            onClick: () => p(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -2857,7 +2883,7 @@ function Ae({ value: e, onChange: t }) {
     ] })
   ] });
 }
-const oe = () => ({ id: "", url: "" }), ja = (e) => {
+const pe = () => ({ id: "", url: "" }), ja = (e) => {
   try {
     return new URL(e), !0;
   } catch {
@@ -2865,10 +2891,10 @@ const oe = () => ({ id: "", url: "" }), ja = (e) => {
   }
 };
 function Qa({ sprites: e, onChange: t }) {
-  const [i, r] = A(null), [n, o] = A(!1), [p, b] = A(oe()), [m, w] = A(null), d = (u) => {
+  const [i, r] = A(null), [n, p] = A(!1), [o, b] = A(pe()), [m, w] = A(null), d = (u) => {
     t(e.map((s, v) => v === i ? u : s));
   }, f = () => {
-    t([...e, p]), o(!1), b(oe());
+    t([...e, o]), p(!1), b(pe());
   }, c = (u) => {
     const s = e.findIndex((v) => v.id === u);
     t(e.filter((v) => v.id !== u)), i !== null && (s === i ? r(null) : s < i && r(i - 1)), w(null);
@@ -2881,7 +2907,7 @@ function Qa({ sprites: e, onChange: t }) {
         {
           type: "button",
           onClick: () => {
-            o(!0), b(oe());
+            p(!0), b(pe());
           },
           className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700",
           children: "+ Add Sprite Sheet"
@@ -2927,14 +2953,14 @@ function Qa({ sprites: e, onChange: t }) {
     )) }),
     n && /* @__PURE__ */ l("div", { className: "mapui:rounded-lg mapui:border mapui:border-blue-200 mapui:bg-blue-50 mapui:p-3", children: [
       /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-3 mapui:text-xs mapui:font-semibold mapui:text-blue-700", children: "New Sprite Sheet" }),
-      /* @__PURE__ */ a(Ae, { value: p, onChange: b }),
+      /* @__PURE__ */ a(Ae, { value: o, onChange: b }),
       /* @__PURE__ */ l("div", { className: "mapui:mt-3 mapui:flex mapui:gap-2", children: [
         /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: f,
-            disabled: !p.id || !p.url || !ja(p.url) || e.some((u) => u.id === p.id),
+            disabled: !o.id || !o.url || !ja(o.url) || e.some((u) => u.id === o.id),
             className: "mapui:cursor-pointer mapui:rounded mapui:bg-blue-600 mapui:px-3 mapui:py-1 mapui:text-xs mapui:font-medium mapui:text-white hover:mapui:bg-blue-700 disabled:mapui:cursor-not-allowed disabled:mapui:opacity-50",
             children: "Save"
           }
@@ -2943,7 +2969,7 @@ function Qa({ sprites: e, onChange: t }) {
           "button",
           {
             type: "button",
-            onClick: () => o(!1),
+            onClick: () => p(!1),
             className: "mapui:cursor-pointer mapui:rounded mapui:border mapui:border-gray-300 mapui:bg-white mapui:px-3 mapui:py-1 mapui:text-xs mapui:text-gray-700 hover:mapui:bg-gray-50",
             children: "Cancel"
           }
@@ -2979,8 +3005,8 @@ function Za({ value: e, onChange: t }) {
   };
   return /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-1", children: [
     /* @__PURE__ */ a("p", { className: "mapui:m-0 mapui:mb-2 mapui:text-xs mapui:text-gray-500", children: "Enable or disable UI panels and controls." }),
-    /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-1 mapui:gap-2 sm:mapui:grid-cols-2", children: $a.map(({ key: r, label: n, description: o }) => {
-      const p = e[r];
+    /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-1 mapui:gap-2 sm:mapui:grid-cols-2", children: $a.map(({ key: r, label: n, description: p }) => {
+      const o = e[r];
       return /* @__PURE__ */ l(
         "label",
         {
@@ -2988,14 +3014,14 @@ function Za({ value: e, onChange: t }) {
           children: [
             /* @__PURE__ */ l("div", { className: "mapui:flex mapui:flex-col mapui:gap-0.5", children: [
               /* @__PURE__ */ a("span", { className: "mapui:text-sm mapui:font-medium mapui:text-gray-800", children: n }),
-              /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500", children: o })
+              /* @__PURE__ */ a("span", { className: "mapui:text-xs mapui:text-gray-500", children: p })
             ] }),
             /* @__PURE__ */ l("div", { className: "mapui:relative mapui:flex mapui:shrink-0 mapui:items-center", children: [
               /* @__PURE__ */ a(
                 "input",
                 {
                   type: "checkbox",
-                  checked: p,
+                  checked: o,
                   onChange: (b) => i(r, b.target.checked),
                   className: "mapui:sr-only",
                   "aria-label": n
@@ -3006,14 +3032,14 @@ function Za({ value: e, onChange: t }) {
                 {
                   className: [
                     "mapui:relative mapui:h-5 mapui:w-9 mapui:rounded-full mapui:transition-colors",
-                    p ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
+                    o ? "mapui:bg-blue-600" : "mapui:bg-gray-300"
                   ].join(" "),
                   children: /* @__PURE__ */ a(
                     "div",
                     {
                       className: [
                         "mapui:absolute mapui:top-0.5 mapui:h-4 mapui:w-4 mapui:rounded-full mapui:bg-white mapui:shadow mapui:transition-transform",
-                        p ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
+                        o ? "mapui:translate-x-4" : "mapui:translate-x-0.5"
                       ].join(" ")
                     }
                   )
@@ -3045,17 +3071,17 @@ function Ra(e, t) {
 const Ba = "mapui:rounded mapui:border mapui:border-gray-300 mapui:px-2 mapui:py-1 mapui:text-sm mapui:outline-none focus:mapui:border-blue-500 focus:mapui:ring-1 focus:mapui:ring-blue-500";
 function et({ value: e, onChange: t }) {
   const i = (r, n) => {
-    const o = parseFloat(n);
-    t({ ...e, [r]: isNaN(o) ? 0 : o });
+    const p = parseFloat(n);
+    t({ ...e, [r]: isNaN(p) ? 0 : p });
   };
-  return /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: Ge.map(({ key: r, label: n, min: o, max: p, step: b, placeholder: m }) => {
+  return /* @__PURE__ */ a("div", { className: "mapui:grid mapui:grid-cols-2 mapui:gap-3", children: Ge.map(({ key: r, label: n, min: p, max: o, step: b, placeholder: m }) => {
     const w = Ra(r, e[r]);
     return /* @__PURE__ */ a(D, { label: n, error: w, children: /* @__PURE__ */ a(
       "input",
       {
         type: "number",
-        min: o,
-        max: p,
+        min: p,
+        max: o,
         step: b,
         value: e[r],
         placeholder: m,
@@ -3104,7 +3130,7 @@ export {
   Y as ColorPicker,
   at as ConfigPreview,
   Z as ConfirmDialog,
-  ot as CoordinateDisplay,
+  pt as CoordinateDisplay,
   di as DatetimeSearchFieldSchema,
   ct as ExportButton,
   ht as FeatureDetailPanel,
@@ -3194,7 +3220,7 @@ export {
   Rt as getCql2FilteredVectorTileUrl,
   Bt as getFilteredVectorTileUrl,
   na as getPrimaryColor,
-  pa as getShapeForStyleType,
+  oa as getShapeForStyleType,
   qt as getTileJsonUrl,
   Ut as getVectorTileUrl,
   Gt as gt,
@@ -3222,7 +3248,7 @@ export {
   li as useCsvExport,
   ni as useOgcCollectionDetail,
   Fe as useOgcCollections,
-  pi as useOgcFeatures,
+  oi as useOgcFeatures,
   Ve as useOgcQueryables,
   Ui as validateMapConfig
 };