@geops/rvf-mobility-web-component 0.1.46 → 0.1.47

package/src/StopsSearch/StopsSearch.tsx

@@ -1,7 +1,5 @@
 import debounce from "lodash.debounce";
 import { StopsAPI } from "mobility-toolbox-js/api";
-import { StopsResponse } from "mobility-toolbox-js/types";
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import {
   useCallback,
@@ -10,34 +8,50 @@ import {
   useRef,
   useState,
 } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
 
 import Cancel from "../icons/Cancel";
 import Search from "../icons/Search";
-// @ts-expect-error tailwind must be added for the search web component
-import tailwind from "../style.css";
-import i18n from "../utils/i18n";
+import IconButton from "../ui/IconButton";
+import useI18n from "../utils/hooks/useI18n";
 import MobilityEvent from "../utils/MobilityEvent";
 
-export type MobilityStopsSearchProps = {
+import type { StopsParameters, StopsResponse } from "mobility-toolbox-js/types";
+import type {
+  HTMLAttributes,
+  PreactDOMAttributes,
+  TargetedKeyboardEvent,
+} from "preact";
+
+export type StopsFeature = StopsResponse["features"][0];
+
+export type StopsSearchProps = {
   apikey: string;
   bbox?: string;
+  cancelButtonClassName?: string;
+  className?: string;
   countrycode?: string;
   event?: string;
   field?: string;
+  inputClassName?: string;
+  inputContainerClassName?: string;
   limit?: number;
   mots?: string;
-  onselect?: (arg: StationFeature) => void;
+  onselect?: (arg: StopsFeature) => void;
   params?: string; // JSONstring
   prefagencies?: string;
   reflocation?: string;
+  resultClassName?: string;
+  resultsClassName?: string;
+  resultsContainerClassName?: string;
+  searchIconContainerClassName?: string;
   url: string;
-} & JSX.HTMLAttributes<HTMLDivElement> &
+  withResultsClassName?: string;
+} & HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-export type StationFeature = StopsResponse["features"][0];
-
-const getQueryForSelectedStation = (selectedStation: StationFeature) => {
-  return selectedStation.properties.name;
+const getQueryForSelectedStation = (selectedStation?: StopsFeature): string => {
+  return selectedStation?.properties?.name || "";
 };
 
 /**
@@ -48,26 +62,35 @@ const getQueryForSelectedStation = (selectedStation: StationFeature) => {
 function StopsSearch({
   apikey,
   bbox,
+  cancelButtonClassName,
+  className,
   countrycode,
   event,
   field,
+  inputClassName,
+  inputContainerClassName,
   limit,
   mots,
   onselect,
   params,
   prefagencies,
   reflocation,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  searchIconContainerClassName,
   url = "https://api.geops.io/stops/v1/",
-}: MobilityStopsSearchProps) {
-  const { t } = i18n;
+  withResultsClassName,
+}: StopsSearchProps) {
+  const { t } = useI18n();
   const [query, setQuery] = useState("");
-  const [selectedStation, setSelectedStation] = useState<StationFeature>();
-  const [results, setResults] = useState<StopsResponse["features"]>(undefined);
+  const [selectedStation, setSelectedStation] = useState<StopsFeature>();
+  const [results, setResults] = useState<StopsFeature[] | undefined>();
   const myRef = useRef<HTMLDivElement>();
 
   useEffect(() => {
     myRef.current?.dispatchEvent(
-      new MobilityEvent<MobilityStopsSearchProps>("mwc:attribute", {
+      new MobilityEvent<StopsSearchProps>("mwc:attribute", {
         apikey,
         bbox,
         countrycode,
@@ -102,8 +125,8 @@ function StopsSearch({
   }, [apikey, url]);
 
   const dispatchEvent = useCallback(
-    (station?: StationFeature) => {
-      const customEvt = new MobilityEvent<StationFeature>(
+    (station?: StopsFeature) => {
+      const customEvt = new MobilityEvent<StopsFeature>(
         event || "mwc:stopssearchselect",
         station,
         {
@@ -121,24 +144,25 @@ function StopsSearch({
   );
 
   const debouncedSearch = useMemo(() => {
-    let abortCtrl: AbortController;
-    return debounce(async (q) => {
+    let abortCtrl: AbortController | undefined;
+
+    return debounce((q) => {
       abortCtrl?.abort();
       abortCtrl = new AbortController();
+
+      const reqParams = {
+        bbox,
+        field,
+        limit,
+        mots,
+        prefagencies,
+        q,
+        ref_location: reflocation,
+        ...JSON.parse(params || "{}"),
+      } as StopsParameters;
+
       api
-        .search(
-          {
-            bbox,
-            field,
-            limit,
-            mots,
-            prefagencies,
-            q,
-            ref_location: reflocation,
-            ...JSON.parse(params || "{}"),
-          },
-          { signal: abortCtrl.signal },
-        )
+        .search(reqParams, { signal: abortCtrl.signal })
         .then((res: StopsResponse) => {
           setResults(
             res.features.filter((f) => {
@@ -149,6 +173,7 @@ function StopsSearch({
         .catch((e) => {
           // AbortError is expected
           if (e.code !== 20) {
+            // eslint-disable-next-line no-console
             console.error("Failed to fetch stations", e);
             return;
           }
@@ -195,28 +220,41 @@ function StopsSearch({
 
   return (
     <>
-      <style>{tailwind}</style>
-      {/* <div className="relative z-0 rounded-md bg-white" > */}
       <div
-        className={
-          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow"
-        }
+        className={twMerge(
+          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow",
+          className,
+          results ? withResultsClassName : "",
+        )}
         ref={myRef}
       >
-        <div className={"flex items-center text-grey"}>
+        <div
+          className={twMerge(
+            "text-grey flex items-center",
+            searchIconContainerClassName,
+          )}
+        >
           <Search className="size-4" />
         </div>
-        <div className={"flex grow overflow-hidden border-b-2 border-solid"}>
+        <div
+          className={twMerge(
+            "@container/inputsearch flex grow items-center border-b-2 border-solid",
+            inputContainerClassName,
+          )}
+        >
           <input
             autoComplete="off"
-            className="h-8 flex-1 outline-0  placeholder:text-zinc-400"
+            className={twMerge(
+              "h-8 flex-1 overflow-hidden text-ellipsis outline-0 placeholder:text-zinc-400",
+              inputClassName,
+            )}
             id="searchfield"
-            onChange={(event) => {
+            onChange={(evt) => {
               // @ts-expect-error target is missing
-              setQuery(event.target.value);
+              setQuery(evt.target.value);
             }}
-            onKeyUp={(event: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
-              if (event.key === "Enter") {
+            onKeyUp={(evt: TargetedKeyboardEvent<HTMLInputElement>) => {
+              if (evt.key === "Enter") {
                 if (results?.length > 0) {
                   setSelectedStation(results[0]);
                 }
@@ -224,60 +262,77 @@ function StopsSearch({
             }}
             placeholder={t("stops_search_placeholder")}
             type="text"
-            value={query}
+            value={query || ""}
           />
           {query.length > 0 && (
-            <button
-              className="flex items-center"
+            <IconButton
+              className={twMerge(
+                "flex !size-[32px] items-center rounded-none border-none bg-transparent shadow-none",
+                cancelButtonClassName,
+              )}
               onClick={() => {
                 setQuery("");
                 setResults(undefined);
               }}
             >
-              <Cancel className="size-4 text-grey" />
-            </button>
+              <Cancel />
+            </IconButton>
           )}
         </div>
       </div>
 
-      <div className="flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
-        {results && results.length === 0 && (
-          <div
-            className={
-              "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400"
-            }
-            style={{ border: 1 }}
-          >
-            <div className="size-6"></div>
-            <div>{t("no_stops_found")}</div>
-          </div>
-        )}
-        {results && results.length > 0 && (
-          <ul
-            className="grow rounded-md rounded-t-none border border-solid bg-white p-0 "
-            style={{ border: 1 }} // without this th ul is displayed 1 px on the right
-          >
-            {results?.map((station) => {
-              return (
-                <li
-                  className="border-b border-dashed border-slate-300 p-3 last:border-0"
-                  key={station.properties.uid}
-                >
-                  <button
-                    className="flex w-full items-center gap-3 text-left"
-                    onClick={() => {
-                      setSelectedStation(station);
-                    }}
+      {results && (
+        <div
+          className={twMerge(
+            "flex grow overflow-auto rounded-md rounded-t-none bg-white shadow",
+            resultsContainerClassName,
+          )}
+        >
+          {results && results.length === 0 && (
+            <div
+              className={twMerge(
+                "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400",
+                resultsClassName,
+              )}
+              style={{ border: 1 }}
+            >
+              <div className="size-6"></div>
+              <div>{t("no_stops_found")}</div>
+            </div>
+          )}
+          {results && results.length > 0 && (
+            <ul
+              className={twMerge(
+                "grow rounded-md rounded-t-none border border-solid bg-white p-0",
+                resultsClassName,
+              )}
+              style={{ border: 1 }} // without this th ul is displayed 1 px on the right
+            >
+              {results?.map((station) => {
+                return (
+                  <li
+                    className={twMerge(
+                      "border-b border-dashed border-slate-300 p-3 last:border-0",
+                      resultClassName,
+                    )}
+                    key={station.properties.uid}
                   >
-                    <div className="size-6"></div>
-                    <div className="grow">{station.properties.name}</div>
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </div>
+                    <button
+                      className="flex w-full items-center gap-3 text-left"
+                      onClick={() => {
+                        setSelectedStation(station);
+                      }}
+                    >
+                      <div className="size-6"></div>
+                      <div className="grow">{station.properties.name}</div>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      )}
       {/* </div> */}
     </>
   );

package/src/WindowMessageListener/WindowMessageListener.tsx

@@ -0,0 +1,68 @@
+import { memo } from "preact/compat";
+import { useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type MobilityEvent from "../utils/MobilityEvent";
+
+const evtTypes = [
+  "mwc:permalink",
+  "mwc:selectedfeature",
+  "mwc:singleclick",
+  "mwc:attribute",
+];
+
+/**
+ * This component propagate the web-components events to the parent window using messages events,
+ * and listen for messages from the parent window.
+ * @param param0
+ * @returns
+ */
+function WindowMessageListener({ eventNode }: { eventNode: HTMLElement }) {
+  const { setPreviewNotifications } = useMapContext();
+
+  // Listen to parent window message events
+  useEffect(() => {
+    const onMessage = (event) => {
+      if (event.data.situations) {
+        console.log("Setting preview situations", event.data.situations);
+        setPreviewNotifications(event.data.situations);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, [setPreviewNotifications]);
+
+  // Propagate wc events to the parent window
+  useEffect(() => {
+    if (!eventNode) {
+      return;
+    }
+
+    const postMessage = (evt: MobilityEvent<unknown>) => {
+      // Clean data before sending it to the parent
+      if (evt.type === "mwc:attribute") {
+        // @ts-expect-error children is the react property
+        delete evt.data.children;
+      }
+      window.parent?.postMessage({ data: evt.data, type: evt.type }, "*");
+    };
+    evtTypes.forEach((eventType) => {
+      eventNode.addEventListener(eventType, postMessage);
+    });
+
+    // warn the parent that the web component is listening
+    window.parent?.postMessage({ data: true, type: "mwc:messageready" }, "*");
+
+    return () => {
+      evtTypes.forEach((eventType) => {
+        eventNode.removeEventListener(eventType, postMessage);
+      });
+    };
+  }, [eventNode]);
+
+  return null;
+}
+export default memo(WindowMessageListener);

package/src/WindowMessageListener/index.tsx

@@ -0,0 +1 @@
+export { default } from "./WindowMessageListener";

package/src/icons/Airport/Airport.tsx

@@ -1,12 +1,12 @@
 function Airport({ ...props }) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      width="24"
-      height="24"
       fill="currentColor"
+      height="24"
+      version="1.1"
       viewBox="0 0 14 14"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path d="m 14,8 0,1 -6,-1 0,3 2,2 0,1 L 7,13 4,14 4,13 6,11 6,8 0,9 0,8 6,5 6,2 C 6,1 6.22222,0 7,0 7.77777,0 8,1 8,2 l 0,3 z" />

package/src/icons/ArrowDown/ArrowDown.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowDown(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/ArrowRight/ArrowRight.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "preact/compat";
+
+function ArrowRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="currentColor"
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13.2928932,5.29289322 C13.6834175,4.90236893 14.3165825,4.90236893 14.7071068,5.29289322 L20.7071068,11.2928932 C20.7355731,11.3213595 20.7623312,11.3515341 20.787214,11.3832499 C20.7927155,11.3901576 20.7982466,11.397397 20.8036654,11.4046934 C20.8215099,11.4288693 20.8382813,11.453725 20.8539326,11.4793398 C20.8613931,11.4913869 20.8685012,11.5036056 20.8753288,11.5159379 C20.8862061,11.5357061 20.8966234,11.5561086 20.9063462,11.5769009 C20.914321,11.5939015 20.9218036,11.6112044 20.9287745,11.628664 C20.9366843,11.6484208 20.9438775,11.6682023 20.9504533,11.6882636 C20.9552713,11.7031487 20.9599023,11.7185367 20.9641549,11.734007 C20.9701664,11.7555635 20.9753602,11.7772539 20.9798348,11.7992059 C20.9832978,11.8166247 20.9863719,11.834051 20.9889822,11.8515331 C20.9962388,11.8996379 21,11.9493797 21,12 L20.9962979,11.9137692 C20.9978436,11.9317345 20.9989053,11.9497336 20.9994829,11.9677454 L21,12 C21,12.0112225 20.9998151,12.0224019 20.9994483,12.0335352 C20.9988772,12.050591 20.997855,12.0679231 20.996384,12.0852242 C20.994564,12.1070574 20.9920941,12.1281144 20.9889807,12.1489612 C20.9863719,12.165949 20.9832978,12.1833753 20.9797599,12.2007258 C20.9753602,12.2227461 20.9701664,12.2444365 20.964279,12.2658396 C20.9599023,12.2814633 20.9552713,12.2968513 20.9502619,12.3121425 C20.9438775,12.3317977 20.9366843,12.3515792 20.928896,12.3710585 C20.9218036,12.3887956 20.914321,12.4060985 20.9063266,12.4232215 C20.8966234,12.4438914 20.8862061,12.4642939 20.8751242,12.484277 C20.8685012,12.4963944 20.8613931,12.5086131 20.8540045,12.5207088 C20.8382813,12.546275 20.8215099,12.5711307 20.8036865,12.5951593 C20.774687,12.6343256 20.7425008,12.6717127 20.7071068,12.7071068 L20.787214,12.6167501 C20.7849289,12.6196628 20.7826279,12.6225624 20.7803112,12.625449 L20.7071068,12.7071068 L14.7071068,18.7071068 C14.3165825,19.0976311 13.6834175,19.0976311 13.2928932,18.7071068 C12.9023689,18.3165825 12.9023689,17.6834175 13.2928932,17.2928932 L17.584,13 L4,13 C3.48716416,13 3.06449284,12.6139598 3.00672773,12.1166211 L3,12 C3,11.4477153 3.44771525,11 4,11 L17.586,11 L13.2928932,6.70710678 C12.9324093,6.34662282 12.9046797,5.77939176 13.2097046,5.38710056 Z"></path>
+    </svg>
+  );
+}
+
+export default ArrowRight;

package/src/icons/ArrowRight/arrow-right.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>arrow-right</title>
+    <defs>
+        <path d="M13.2928932,5.29289322 C13.6834175,4.90236893 14.3165825,4.90236893 14.7071068,5.29289322 L20.7071068,11.2928932 C20.7355731,11.3213595 20.7623312,11.3515341 20.787214,11.3832499 C20.7927155,11.3901576 20.7982466,11.397397 20.8036654,11.4046934 C20.8215099,11.4288693 20.8382813,11.453725 20.8539326,11.4793398 C20.8613931,11.4913869 20.8685012,11.5036056 20.8753288,11.5159379 C20.8862061,11.5357061 20.8966234,11.5561086 20.9063462,11.5769009 C20.914321,11.5939015 20.9218036,11.6112044 20.9287745,11.628664 C20.9366843,11.6484208 20.9438775,11.6682023 20.9504533,11.6882636 C20.9552713,11.7031487 20.9599023,11.7185367 20.9641549,11.734007 C20.9701664,11.7555635 20.9753602,11.7772539 20.9798348,11.7992059 C20.9832978,11.8166247 20.9863719,11.834051 20.9889822,11.8515331 C20.9962388,11.8996379 21,11.9493797 21,12 L20.9962979,11.9137692 C20.9978436,11.9317345 20.9989053,11.9497336 20.9994829,11.9677454 L21,12 C21,12.0112225 20.9998151,12.0224019 20.9994483,12.0335352 C20.9988772,12.050591 20.997855,12.0679231 20.996384,12.0852242 C20.994564,12.1070574 20.9920941,12.1281144 20.9889807,12.1489612 C20.9863719,12.165949 20.9832978,12.1833753 20.9797599,12.2007258 C20.9753602,12.2227461 20.9701664,12.2444365 20.964279,12.2658396 C20.9599023,12.2814633 20.9552713,12.2968513 20.9502619,12.3121425 C20.9438775,12.3317977 20.9366843,12.3515792 20.928896,12.3710585 C20.9218036,12.3887956 20.914321,12.4060985 20.9063266,12.4232215 C20.8966234,12.4438914 20.8862061,12.4642939 20.8751242,12.484277 C20.8685012,12.4963944 20.8613931,12.5086131 20.8540045,12.5207088 C20.8382813,12.546275 20.8215099,12.5711307 20.8036865,12.5951593 C20.774687,12.6343256 20.7425008,12.6717127 20.7071068,12.7071068 L20.787214,12.6167501 C20.7849289,12.6196628 20.7826279,12.6225624 20.7803112,12.625449 L20.7071068,12.7071068 L14.7071068,18.7071068 C14.3165825,19.0976311 13.6834175,19.0976311 13.2928932,18.7071068 C12.9023689,18.3165825 12.9023689,17.6834175 13.2928932,17.2928932 L17.584,13 L4,13 C3.48716416,13 3.06449284,12.6139598 3.00672773,12.1166211 L3,12 C3,11.4477153 3.44771525,11 4,11 L17.586,11 L13.2928932,6.70710678 C12.9324093,6.34662282 12.9046797,5.77939176 13.2097046,5.38710056 Z" id="path-1"></path>
+    </defs>
+    <g id="arrow-right" stroke="none" fill="none">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Combined-Shape" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+        <g id="🎨Color" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd">
+            <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>

package/src/icons/ArrowRight/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ArrowRight";

package/src/icons/ArrowUp/ArrowUp.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowUp(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/ArrowUpRight/ArrowUpRight.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function ArrowUpRight(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/BarAndRestaurants/BarAndRestaurants.tsx

@@ -2,10 +2,10 @@ function BarAndRestaurants({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
-      viewBox="0 -3.84 122.88 122.88"
       version="1.1"
+      viewBox="0 -3.84 122.88 122.88"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Bathroom/Bathroom.tsx

@@ -3,9 +3,9 @@ function Bathroom({ ...props }) {
     <svg
       fill="currentColor"
       height="24px"
-      width="24px"
       version="1.1"
       viewBox="0 0 512 512"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Copy/Copy.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Copy({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Doc/Doc.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Doc(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Email/Email.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Email(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/FilePdf/FilePdf.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function FilePdf(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Geolocation/Geolocation.tsx

@@ -1,15 +1,13 @@
-import { SVGProps } from "preact/compat";
-
-function Geolocation(props: SVGProps<SVGSVGElement>) {
+function Geolocation({ ...props }) {
   return (
     <svg
       fill="currentColor"
       focusable="false"
-      height="1.5em"
+      height="24"
       stroke="currentColor"
       strokeWidth="0"
       viewBox="0 0 512 512"
-      width="1.5em"
+      width="24"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

package/src/icons/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Image({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Menu/Menu.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Menu(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Minus/Minus.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Minus(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/NoRealtime/NoRealtime.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function NoRealtime(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Plus/Plus.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "preact/compat";
+import type { SVGProps } from "preact/compat";
 
 function Plus(props: SVGProps<SVGSVGElement>) {
   return (

package/src/icons/Police/Police.tsx

@@ -2,16 +2,16 @@ function Police({ ...props }) {
   return (
     <svg
       fill="currentColor"
-      width="24px"
       height="24px"
-      viewBox="0 0 15 15"
       version="1.1"
+      viewBox="0 0 15 15"
+      width="24px"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        id="rect4718"
         d="M5.5,1L6,2h5l0.5-1H5.5z M6,2.5v1.25c0,0,0,2.75,2.5,2.75S11,3.75,11,3.75V2.5H6z M1.9844,3.9863&#xA;&#x9;C1.4329,3.9949,0.9924,4.4485,1,5v4c-0.0001,0.6398,0.5922,1.1152,1.2168,0.9766L5,9.3574V14l5.8789-6.9297&#xA;&#x9;C10.7391,7.0294,10.5947,7,10.4414,7H6.5L3,7.7539V5C3.0077,4.4362,2.5481,3.9775,1.9844,3.9863z M11.748,7.7109L6.4121,14H12&#xA;&#x9;V8.5586C12,8.2451,11.9061,7.9548,11.748,7.7109z"
+        id="rect4718"
       />
     </svg>
   );

package/src/icons/Search/Search.tsx

@@ -8,7 +8,6 @@ function Search({ ...props }) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <title>iconfont/search</title>
       <defs>
         <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
       </defs>

package/src/icons/Share/Share.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Share({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (

package/src/icons/Stack/Stack.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "preact";
+import type { JSX } from "preact";
 
 function Stack({ ...props }: JSX.SVGAttributes<SVGSVGElement>) {
   return (