npm - @maptiler/geocoding-control - Versions diffs - 0.0.61 → 0.0.72 - Mend

@maptiler/geocoding-control 0.0.61 → 0.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/{dist/lib/leafletMapController.d.ts → leaflet-controller.d.ts} +0 -0
package/leaflet-controller.js +15021 -0
package/leaflet-controller.umd.js +25 -0
package/{dist/lib/LeafletGeocodingControl.d.ts → leaflet.d.ts} +0 -0
package/{dist/leaflet.js → leaflet.js} +1085 -1083
package/{dist/leaflet.umd.js → leaflet.umd.js} +4 -4
package/{dist/lib/MaplibreglGeocodingControl.d.ts → maplibre.d.ts} +0 -0
package/{dist/lib/maplibreglMapController.d.ts → maplibregl-controller.d.ts} +1 -1
package/maplibregl-controller.js +15041 -0
package/maplibregl-controller.umd.js +25 -0
package/{dist/maplibregl.js → maplibregl.js} +1144 -1142
package/{dist/maplibregl.umd.js → maplibregl.umd.js} +4 -4
package/{dist/lib/mask.d.ts → mask.d.ts} +2 -1
package/package.json +50 -18
package/react.d.ts +26 -0
package/react.js +1327 -0
package/react.umd.js +1 -0
package/src/AppLeaflet.svelte +55 -0
package/src/AppMaplibregl.svelte +45 -0
package/src/lib/GeocodingControl.svelte +32 -28
package/src/lib/ReactGeocodingControl.ts +158 -0
package/src/lib/leafletMapController.ts +5 -6
package/src/lib/maplibreglMapController.ts +4 -3
package/src/lib/mask.ts +2 -1
package/src/lib/types.ts +3 -1
package/src/main-copy.ts +59 -0
package/src/main.ts +65 -0
package/src/vite-env.d.ts +2 -0
package/style.css +1 -0
package/{dist/lib/types.d.ts → types.d.ts} +2 -1
package/LICENSE +0 -29
package/README.md +0 -194
package/dist/index.d.ts +0 -0
package/dist/main.d.ts +0 -3
package/dist/style.css +0 -1

package/react.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/src/AppLeaflet.svelte ADDED Viewed

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import "leaflet/dist/leaflet.css";
+  import { onMount } from "svelte";
+  import { GeocodingControl } from "./lib/LeafletGeocodingControl";
+  import * as L from "leaflet";
+  let containerElement: HTMLElement;
+  const apiKey = import.meta.env.VITE_API_KEY;
+  if (!apiKey) {
+    const errMsg = "missing VITE_API_KEY environment variable";
+    window.alert(errMsg);
+    throw new Error(errMsg);
+  }
+  onMount(() => {
+    const map = L.map(containerElement).setView([51.505, -0.09], 13);
+    const scale = devicePixelRatio > 1.5 ? "@2x" : "";
+    L.tileLayer(
+      `https://api.maptiler.com/maps/streets/{z}/{x}/{y}${scale}.png?key=` +
+        apiKey,
+      {
+        tileSize: 512,
+        zoomOffset: -1,
+        minZoom: 1,
+        attribution:
+          '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>, ' +
+          '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
+        crossOrigin: true,
+      }
+    ).addTo(map);
+    new GeocodingControl({
+      apiKey,
+      enableReverse: "always",
+      showPlaceType: true,
+      // collapsed: true,
+    }).addTo(map);
+  });
+</script>
+<main id="main" bind:this={containerElement} />
+<style>
+  #main {
+    position: absolute;
+    inset: 0;
+  }
+</style>

package/src/AppMaplibregl.svelte ADDED Viewed

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import "maplibre-gl/dist/maplibre-gl.css";
+  import { Map } from "maplibre-gl";
+  import { onMount } from "svelte";
+  import { GeocodingControl } from "./lib/MaplibreglGeocodingControl";
+  import maplibregl from "maplibre-gl";
+  let containerElement: HTMLElement;
+  const apiKey = import.meta.env.VITE_API_KEY;
+  if (!apiKey) {
+    const errMsg = "missing VITE_API_KEY environment variable";
+    window.alert(errMsg);
+    throw new Error(errMsg);
+  }
+  onMount(() => {
+    const map = new Map({
+      style: "https://api.maptiler.com/maps/streets/style.json?key=" + apiKey,
+      container: containerElement,
+    });
+    map.addControl(
+      new GeocodingControl({
+        apiKey,
+        maplibregl,
+        enableReverse: "always",
+        showPlaceType: true,
+      })
+    );
+  });
+</script>
+<main id="main" bind:this={containerElement} />
+<style>
+  #main {
+    position: absolute;
+    inset: 0;
+  }
+</style>

package/src/lib/GeocodingControl.svelte CHANGED Viewed

@@ -17,62 +17,62 @@
   export { className as class };
-  export let mapController: MapController | undefined = undefined;
   export let apiKey: string;
-  export let debounceSearch = 200;
-  export let placeholder = "Search";
-  export let errorMessage = "Searching failed";
+  export let bbox: [number, number, number, number] | undefined = undefined;
-  export let noResultsMessage = "No results found";
+  export let clearButtonTitle = "clear";
-  export let proximity: Proximity = undefined;
+  export let clearOnBlur = false;
-  export let bbox: [number, number, number, number] | undefined = undefined;
+  export let collapsed = false;
-  export let trackProximity = true;
+  export let country: string | string[] | undefined = undefined;
-  export let minLength = 2;
+  export let debounceSearch = 200;
-  export let language: string | string[] | undefined = undefined;
+  export let enableReverse: boolean | "always" = false;
-  export let showResultsWhileTyping = true;
+  export let errorMessage = "Searching failed";
-  export let zoom = 16;
+  export let filter: (feature: Feature) => boolean = () => true;
   export let flyTo = true;
-  export let collapsed = false;
+  export let fuzzyMatch = true;
-  export let clearOnBlur = false;
+  export let language: string | string[] | undefined = undefined;
-  export let enableReverse: boolean | "always" = false;
+  export let limit: number | undefined = undefined;
-  export let reverseButtonTitle = "toggle reverse geocoding";
+  export let mapController: MapController | undefined = undefined;
-  export let clearButtonTitle = "clear";
+  export let minLength = 2;
-  export let filter: (feature: Feature) => boolean = () => true;
+  export let noResultsMessage = "No results found";
-  export let searchValue = "";
+  export let placeholder = "Search";
+  export let proximity: Proximity = undefined;
   export let reverseActive = enableReverse === "always";
-  export let showPlaceType = false;
+  export let reverseButtonTitle = "toggle reverse geocoding";
+  export let searchValue = "";
   export let showFullGeometry = true;
-  export let limit: number | undefined = undefined;
+  export let showPlaceType = false;
-  export let fuzzyMatch = true;
+  export let showResultsWhileTyping = true;
-  export let country: string | string[] | undefined = undefined;
+  export let trackProximity = true;
   export let types: string[] | undefined = undefined;
+  export let zoom = 16;
   export function focus() {
     input.focus();
   }
@@ -584,14 +584,17 @@
   {:else if listFeatures?.length === 0}
     <div class="no-results">{noResultsMessage}</div>
   {:else if focusedDelayed && listFeatures?.length}
-    <ul on:mouseout={() => (selectedItemIndex = -1)} on:blur={() => undefined}>
+    <ul
+      on:mouseleave={() => (selectedItemIndex = -1)}
+      on:blur={() => undefined}
+    >
       {#each listFeatures as feature, i}
         <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
         <li
           tabindex="0"
           data-selected={selectedItemIndex === i}
           class:selected={selectedItemIndex === i}
-          on:mouseover={() => (selectedItemIndex = i)}
+          on:mouseenter={() => (selectedItemIndex = i)}
           on:focus={() => pick(feature)}
         >
           <MarkerIcon displayIn="list" />
@@ -693,6 +696,7 @@
   }
   li {
+    text-align: left;
     cursor: default;
     display: grid;
     grid-template-columns: auto 1fr;

package/src/lib/ReactGeocodingControl.ts ADDED Viewed

@@ -0,0 +1,158 @@
+import GeocodingControl from "./GeocodingControl.svelte";
+import {
+  createElement,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type Ref,
+} from "react";
+import type { ControlOptions, Feature, MapController } from "./types";
+// TODO this would be nice to be derived from `Parameters<GeocodingControl["$on"]>[0]` but it just doesn't work
+type CallbackProperties = {
+  onSelect?: (feature: Feature | undefined) => void;
+  onPick?: (feature: Feature | undefined) => void;
+  onOptionsVisibilityChange?: (visible: boolean) => void;
+  onFeaturesListed?: (visible: Feature[] | undefined) => void;
+  onFeaturesMarked?: (visible: Feature[] | undefined) => void;
+  onResponse?: (onResponse: { url: string; response: Response }) => void;
+  onReversetoggle?: (reverse: boolean) => void;
+  onQuerychange?: (query: string) => void;
+};
+type EventName<T extends keyof CallbackProperties> = T extends `on${infer U}`
+  ? Uncapitalize<U>
+  : never;
+type EventNames = EventName<keyof CallbackProperties>;
+const eventNames = [
+  "featuresListed",
+  "featuresMarked",
+  "optionsVisibilityChange",
+  "pick",
+  "querychange",
+  "response",
+  "reversetoggle",
+  "select",
+] as const satisfies readonly EventNames[];
+type MapControllerProp = {
+  mapController?: MapController;
+};
+const propertyNames = [
+  "apiKey",
+  "bbox",
+  "clearButtonTitle",
+  "clearOnBlur",
+  "collapsed",
+  "country",
+  "debounceSearch",
+  "enableReverse",
+  "errorMessage",
+  "filter",
+  "fuzzyMatch",
+  "language",
+  "limit",
+  "minLength",
+  "noResultsMessage",
+  "placeholder",
+  "proximity",
+  "reverseButtonTitle",
+  "showFullGeometry",
+  "showPlaceType",
+  "showResultsWhileTyping",
+  "trackProximity",
+  "types",
+  "zoom",
+  "mapController",
+] as const satisfies readonly (keyof (ControlOptions & MapControllerProp))[];
+type EventHandlerFnName<T extends EventNames> = `on${Capitalize<T>}`;
+function getEventFnName<T extends EventNames>(name: T): EventHandlerFnName<T> {
+  return ("on" +
+    name[0].toUpperCase() +
+    name.slice(1)) as EventHandlerFnName<T>;
+}
+export type Props = ControlOptions & CallbackProperties & MapControllerProp;
+// // not used because it does not integrate well with Svelte
+// type MethodNames = "blur" | "focus" | "setQuery";
+//
+// export type Methods = { [T in MethodNames]: GeocodingControl[T] };
+export type Methods = {
+  blur: () => void;
+  focus: () => void;
+  setQuery: (value: string, submit?: boolean) => void;
+};
+const ReactGeocodingControl = forwardRef(function ReactGeocodingControl(
+  props: Props,
+  ref: Ref<Methods>
+) {
+  const divRef = useRef<HTMLDivElement>();
+  const controlRef = useRef<GeocodingControl>();
+  const options = { ...props };
+  for (const eventName of eventNames) {
+    delete options[getEventFnName(eventName)];
+  }
+  useEffect(() => {
+    if (!divRef.current) {
+      throw new Error();
+    }
+    const control = new GeocodingControl({
+      target: divRef.current,
+      props: options,
+    });
+    controlRef.current = control;
+    return () => control.$destroy();
+  }, []);
+  // watch change on every option
+  for (const propName of propertyNames) {
+    useEffect(() => {
+      if (controlRef.current && props[propName] !== undefined) {
+        controlRef.current.$set({ [propName]: props[propName] });
+      }
+    }, [props[propName]]);
+  }
+  // attach event handlers
+  for (const eventName of eventNames) {
+    const eventHandlerFn = props[getEventFnName(eventName)];
+    useEffect(() => {
+      controlRef.current?.$on(
+        eventName,
+        !eventHandlerFn
+          ? undefined
+          : (e) => {
+              (eventHandlerFn as any)(e.detail);
+            }
+      );
+    }, [eventHandlerFn]);
+  }
+  useImperativeHandle(ref, () => ({
+    setQuery: (value: string, submit = true) =>
+      controlRef.current?.setQuery(value, submit),
+    focus: () => controlRef.current?.focus(),
+    blur: () => controlRef.current?.blur(),
+  }));
+  return createElement("div", { ref: divRef });
+});
+export { ReactGeocodingControl as GeocodingControl };

package/src/lib/leafletMapController.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import type {
 } from "@turf/helpers";
 import union from "@turf/union";
 import { setMask } from "./mask";
+import type { GeoJSON } from "geojson";
 export function createLeafletMapController(
   map: L.Map,
@@ -163,7 +164,7 @@ export function createLeafletMapController(
         return;
       }
-      function setData(data?: GeoJSON.GeoJSON) {
+      function setData(data?: GeoJSON) {
         resultLayer.clearLayers();
         if (data) {
@@ -260,11 +261,9 @@ export function createLeafletMapController(
               ? new L.Marker(pos, showResultMarkers)
               : createMarker(pos, true);
-          marker
-            .addTo(map)
-            .bindTooltip(feature.place_name.replace(/,.*/, ""), {
-              direction: "top",
-            });
+          marker.addTo(map).bindTooltip(feature.place_name.replace(/,.*/, ""), {
+            direction: "top",
+          });
           const element = marker.getElement();

package/src/lib/maplibreglMapController.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import type {
   LineLayerSpecification,
 } from "maplibre-gl";
 import MarkerIcon from "./MarkerIcon.svelte";
-import type { Feature, MapController, MapEvent, Proximity } from "./types";
+import type { Feature, MapController, MapEvent, Proximity } from "./types.js";
 import union from "@turf/union";
 import type {
   Polygon,
@@ -20,8 +20,9 @@ import type {
   MultiLineString,
 } from "@turf/helpers";
 import { setMask } from "./mask";
+import type { FeatureCollection, GeoJSON } from "geojson";
-let emptyGeojson: GeoJSON.FeatureCollection = {
+let emptyGeojson: FeatureCollection = {
   type: "FeatureCollection",
   features: [],
 };
@@ -218,7 +219,7 @@ export function createMaplibreglMapController(
         return;
       }
-      function setData(data: GeoJSON.GeoJSON) {
+      function setData(data: GeoJSON) {
         (map.getSource("full-geom") as GeoJSONSource)?.setData(data);
       }

package/src/lib/mask.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import type {
 } from "@turf/helpers";
 import difference from "@turf/difference";
 import buffer from "@turf/buffer";
+import type { GeoJSON } from "geojson";
 // see https://maplibre.org/maplibre-gl-js-docs/example/line-across-180th-meridian/
 function fixRing(ring: Position[]) {
@@ -24,7 +25,7 @@ function fixRing(ring: Position[]) {
 export function setMask(
   picked: TurfFeature<Polygon | MultiPolygon>,
-  setData: (data: GeoJSON.GeoJSON) => void
+  setData: (data: GeoJSON) => void
 ) {
   const diff = difference(
     {

package/src/lib/types.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-export type Feature = GeoJSON.Feature & {
+import type { Feature as FeatureType } from "geojson";
+export type Feature = FeatureType & {
   id: string;
   text: string;
   place_name: string;

package/src/main-copy.ts ADDED Viewed

@@ -0,0 +1,59 @@
+// import App from "./AppMaplibregl.svelte";
+import { createElement, useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  ReactGeocodingControl,
+  type Methods,
+} from "./lib/ReactGeocodingControl";
+const appElement = document.getElementById("app");
+if (!appElement) {
+  throw new Error("element with id 'app' not found");
+}
+// const app = new App({
+//   target: appElement,
+// });
+// export default app;
+const apiKey = import.meta.env.VITE_API_KEY;
+if (!apiKey) {
+  const errMsg = "missing VITE_API_KEY environment variable";
+  window.alert(errMsg);
+  throw new Error(errMsg);
+}
+const root = createRoot(appElement);
+function App() {
+  const ref = useRef<Methods>(null);
+  const [collapsed, setCollapsed] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current?.focus();
+    });
+    setTimeout(() => {
+      setCollapsed(true);
+    }, 5000);
+  }, []);
+  return createElement(ReactGeocodingControl, {
+    ref,
+    apiKey,
+    collapsed,
+    onSelect: (f) => {
+      console.log("select", f);
+    },
+  });
+}
+root.render(createElement(App));

package/src/main.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import App from "./AppMaplibregl.svelte";
+import {
+  createElement,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createRoot } from "react-dom/client";
+import {
+  ReactGeocodingControl,
+  type Methods,
+} from "./lib/ReactGeocodingControl";
+const appElement = document.getElementById("app");
+if (!appElement) {
+  throw new Error("element with id 'app' not found");
+}
+const app = new App({
+  target: appElement,
+});
+export default app;
+// const apiKey = import.meta.env.VITE_API_KEY;
+// if (!apiKey) {
+//   const errMsg = "missing VITE_API_KEY environment variable";
+//   window.alert(errMsg);
+//   throw new Error(errMsg);
+// }
+// const root = createRoot(appElement);
+// function App() {
+//   const ref = useRef<Methods>(null);
+//   const [collapsed, setCollapsed] = useState(false);
+//   useEffect(() => {
+//     setTimeout(() => {
+//       ref.current?.focus();
+//     });
+//     setTimeout(() => {
+//       setCollapsed(true);
+//     }, 5000);
+//   }, []);
+//   return createElement(ReactGeocodingControl, {
+//     ref,
+//     apiKey,
+//     collapsed,
+//     onSelect: (f) => {
+//       console.log("select", f);
+//     },
+//   });
+// }
+// root.render(createElement(App));

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /// <reference types="svelte" />
2	+ /// <reference types="vite/client" />

package/style.css ADDED Viewed

@@ -0,0 +1 @@

+ div.svelte-7cmwmc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center}svg.svelte-7cmwmc{animation:svelte-7cmwmc-rotate .8s infinite cubic-bezier(.45,.05,.55,.95)}@keyframes svelte-7cmwmc-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}svg.svelte-1k1cmht.svelte-1k1cmht{display:block;fill:#6b7c93;stroke:#6b7c93}.list-icon.svelte-1k1cmht.svelte-1k1cmht{grid-row:1/3;align-self:center;margin:8px}.in-map.svelte-1k1cmht.svelte-1k1cmht{height:30px}.maplibregl-canvas-container .marker-selected{z-index:1}.maplibregl-canvas-container svg.svelte-1k1cmht path.svelte-1k1cmht,.leaflet-map-pane svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#3170fe;stroke:#3170fe}.marker-selected svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#98b7ff;stroke:#3170fe}.marker-reverse svg.svelte-1k1cmht path.svelte-1k1cmht{fill:silver;stroke:gray}.marker-interactive{cursor:pointer!important}.marker-fuzzy svg.svelte-1k1cmht path.svelte-1k1cmht{fill:silver;stroke:gray}.marker-fuzzy.marker-selected svg.svelte-1k1cmht path.svelte-1k1cmht{fill:#ddd;stroke:silver}.maptiler-gc-popup>.maplibregl-popup-content{padding:2px 8px}svg.svelte-en2qvf{display:block;fill:var(--color-icon-button)}form.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,form.svelte-z0d4ta .svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,form.svelte-z0d4ta .svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:after,form.svelte-z0d4ta .svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:before{box-sizing:border-box}form.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{font-family:Ubuntu,Open Sans,Helvetica Neue,Arial,Helvetica,sans-serif;position:relative;background-color:#fff;width:100%;z-index:10;border-radius:4px;transition:max-width .25s;box-shadow:0 2px 8px #33335926;--color-text:#333359;--color-icon-button:#333359}form.can-collapse.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{max-width:35px}form.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,form.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:focus-within,form.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:hover{max-width:240px}input.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{font:inherit;font-size:14px;width:100%;border:0;background-color:transparent;margin:0;height:36px;color:#000000bf;white-space:nowrap;overflow:hidden;padding:0}input.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:focus{color:#000000bf;outline:0;outline:none;box-shadow:none}ul.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,div.error.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,div.no-results.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{background-color:#fff;border-radius:4px;left:0;list-style:none;margin:0;padding:0;position:absolute;width:100%;top:calc(100% + 6px);font-size:14px;box-shadow:0 2px 8px #33335926;line-height:16px;overflow:hidden}.maplibregl-ctrl-bottom-left ul.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,.maplibregl-ctrl-bottom-right ul.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{top:auto;bottom:100%}li.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{text-align:left;cursor:default;display:grid;grid-template-columns:auto 1fr;color:var(--color-text);padding:4px 0}li.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:first-child{padding-top:8px}li.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:last-child{padding-bottom:8px}li.svelte-z0d4ta>span.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{overflow:hidden;padding-right:8px}li.svelte-z0d4ta>span.svelte-z0d4ta>span.svelte-z0d4ta.svelte-z0d4ta{white-space:nowrap;display:block;min-width:fit-content}li.selected.svelte-z0d4ta>span.svelte-z0d4ta>span.svelte-z0d4ta.svelte-z0d4ta{animation:svelte-z0d4ta-backAndForth 5s linear infinite}li.svelte-z0d4ta>span.svelte-z0d4ta:nth-of-type(1)>span.svelte-z0d4ta>span.svelte-z0d4ta:nth-of-type(1){font-weight:700}li.svelte-z0d4ta>span.svelte-z0d4ta:nth-of-type(1)>span.svelte-z0d4ta>span.svelte-z0d4ta:nth-of-type(2){color:#aeb6c7;font-size:12px;padding-left:4px}li.selected.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{background-color:#f3f3f3}button.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:hover{background-color:transparent}button.svelte-z0d4ta:hover svg,button.active.svelte-z0d4ta svg{fill:#6b7c92}button.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{padding:0;margin:0;border:0;background-color:transparent}.input-group.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{display:flex;align-items:stretch;gap:7px;padding-inline:8px;outline:#c1cfe4 solid 2px;border-radius:4px;overflow:hidden}.input-group.svelte-z0d4ta:hover .displayable.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{visibility:visible}.input-group.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:focus-within{outline:#3170fe solid 2px}div.error.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta,div.no-results.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{font:inherit;font-size:14px;padding:6px 10px}div.error.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{color:#e25041}div.no-results.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{color:var(--color-text)}.clear-button-container.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{position:relative;display:flex;align-items:stretch}.clear-button-container.svelte-z0d4ta button.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta{visibility:hidden}@keyframes svelte-z0d4ta-backAndForth{0%{transform:translate(0)}10%{transform:translate(0)}45%{transform:translate(calc(-100% + 196px))}55%{transform:translate(calc(-100% + 196px))}90%{transform:translate(0)}to{transform:translate(0)}}form.can-collapse.svelte-z0d4ta button.svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:not(:nth-of-type(1)){opacity:0;transition:opacity .25s}form.can-collapse.svelte-z0d4ta:focus-within .svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:not(:nth-of-type(1)),form.can-collapse.svelte-z0d4ta:hover .svelte-z0d4ta.svelte-z0d4ta.svelte-z0d4ta:not(:nth-of-type(1)){opacity:1}