@heycar/heycars-map 2.11.0 → 2.12.0-color2

package/README.md

@@ -140,6 +140,26 @@ export type RecommendType = "Restricted" | "Forbidden" | "Recommend";
   googleDirectionsProxyUrl="/overseas/maps/directions/json"
   // 可选，谷歌路由服务代理地址
   googleRoutesProxyUrl="/overseas/maps/routes/directions"
+  // 可选，自定义地图颜色
+  themeVariables={{
+    TRAFFIC_UNKNOWN_BACKGROUND_COLOR: "#00C875",
+    TRAFFIC_UNKNOWN_BORDER_COLOR: "#008559",
+    TRAFFIC_NORMAL_BACKGROUND_COLOR: "#00C875",
+    TRAFFIC_NORMAL_BORDER_COLOR: "#008559",
+    TRAFFIC_SLOW_BACKGROUND_COLOR: "#F9D100",
+    TRAFFIC_SLOW_BORDER_COLOR: "#B29400",
+    TRAFFIC_TRAFFIC_JAM_BACKGROUND_COLOR: "#EB0E33",
+    TRAFFIC_TRAFFIC_JAM_BORDER_COLOR: "#990D24",
+    TRAFFIC_HEAVY_TRAFFIC_JAM_BACKGROUND_COLOR: "#99001A",
+    TRAFFIC_HEAVY_TRAFFIC_JAM_BORDER_COLOR: "#4D000D",
+    TRAFFIC_DONE_BACKGROUND_COLOR: "#96B2CA",
+    TRAFFIC_DONE_BORDER_COLOR: "#7693AF",
+    WALKING_LINE_COLOR: "#38A3FE",
+    ZONE_RESTRICTED_BACKGROUND_COLOR: "#C7E5FB",
+    ZONE_RESTRICTED_BORDER_COLOR: "#4BA7FF",
+    ZONE_FORBIDDEN_BACKGROUND_COLOR: "#F27878",
+    ZONE_FORBIDDEN_BORDER_COLOR: "#F41717",
+  }}
   // 地图加载失败时显示的标题
   renderLoadFailedTitle={() => (supplier === "gmap" ? "未能成功访问谷歌地图" : "高德地图加载失败")}
   // 地图加载失败时显示的描述

package/dist/v2/App.js

@@ -1,6 +1,6 @@
 import { h } from "vue";
 import { defineComponent, ref } from "vue-demi";
-import { DemoBusinessQuoting } from "./Demo/DemoBusinessQuoting.js";
+import { DemoBusinessRecomendPlace } from "./Demo/DemoBusinessRecomendPlace.js";
 import { MapProvider } from "./components/MapProvider/MapProvider.js";
 const gmapApiKey = "AIzaSyCCOe8MAeS3EYvSraKsBX6ztVyLxj69z94";
 const gmapId = "d0af0c05331af64a";
@@ -8,7 +8,7 @@ const amapApiKey = "fcb7b14c930354a248e21f4031dfa179";
 const amapApiSecret = "11ad0e3d585b80d18b1ada5b0d947c4a";
 const App = defineComponent({
   setup() {
-    const supplierRef = ref("gmap");
+    const supplierRef = ref("amap");
     window.supplierRef = supplierRef;
     return () => h(MapProvider, {
       "attrs": {
@@ -20,6 +20,28 @@ const App = defineComponent({
         "supplier": supplierRef.value,
         "googleSnapRoadProxyUrl": "/overseas/maps/snapToRoads",
         "googleRoutesProxyUrl": "/overseas/maps/routes/directions",
+        "themeVariables": {
+          // 红区色
+          FORBIDDEN_HUE: 0,
+          // 副品牌色
+          SECONDARY_BAND_HUE: 20,
+          // 副品牌补充色A
+          SECONDARY_BAND_A_HUE: 30,
+          // 交通缓慢色
+          TRAFFIC_SLOW_HUE: 50,
+          // 交通通畅色
+          TRAFFIC_NORMAL_HUE: 155,
+          // 交通通畅补充色A
+          TRAFFIC_NORMAL_A_HUE: 160,
+          // 主品牌补充色B
+          PRIMARY_BAND_B_HUE: 206,
+          // 主品牌补充色A
+          PRIMARY_BAND_A_HUE: 220,
+          // 主品牌色
+          PRIMARY_BAND_HUE: 226,
+          // 交通拥堵色
+          TRAFFIC_JAM_HUE: 350
+        },
         "renderLoadFailedTitle": () => supplierRef.value === "gmap" ? "未能成功访问谷歌地图" : "高德地图加载失败",
         "renderLoadFailedDescription": () => supplierRef.value === "gmap" ? "请确认您的网络能正常访问谷歌地图， \n或切回高德地图" : void 0
       },
@@ -28,7 +50,7 @@ const App = defineComponent({
         "fail": () => console.log(`${supplierRef.value} load failed`),
         "downloadOptimizeEnd": () => console.log(`${supplierRef.value} load download optimize end`)
       }
-    }, [h(DemoBusinessQuoting)]);
+    }, [h(DemoBusinessRecomendPlace)]);
   }
 });
 export {

package/dist/v2/Demo/DemoBusinessRecomendPlace.js

@@ -1,5 +1,5 @@
 import { h } from "vue";
-import { B as BusinessRecomendPlaceMap } from "../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B as BusinessRecomendPlaceMap } from "../chunks/BusinessRecomendPlaceMap.18b28e1b.js";
 import { useBusinessRecomendPlaceMap } from "../hooks-business/useBusinessRecomendPlaceMap.js";
 import { defineSetup } from "../types/helper.js";
 import { d as demo } from "../chunks/Demo.css.e921a2f6.js";

package/dist/v2/api/cdn.d.ts

@@ -1,7 +1,7 @@
 export declare const AMAP_DEFAULT_MARKER_ICON_URL = "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png";
 export declare const ICON_FULL_SCREEN_URL = "https://overseas-oss.heycars.cn/heycar-map/png/fullscreen.png";
-export declare const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/start-point-en.svg";
-export declare const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-en.svg";
+export declare const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
+export declare const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
 export declare const ICON_END_POINT_ZH_TW_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-zh-TW.svg";
 export declare const ICON_TAXI_CAR_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/taxi-car.svg";
 export declare const ICON_DOT_LOADING_URL = "https://overseas-oss.heycars.cn/heycar-map/gif/dot-loading.gif";

package/dist/v2/api/cdn.js

@@ -1,7 +1,7 @@
 const AMAP_DEFAULT_MARKER_ICON_URL = "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png";
 const ICON_FULL_SCREEN_URL = "https://overseas-oss.heycars.cn/heycar-map/png/fullscreen.png";
-const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/start-point-en.svg";
-const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-en.svg";
+const ICON_START_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
+const ICON_END_POINT_EN_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/tmp/start-point-en.20250512.svg";
 const ICON_END_POINT_ZH_TW_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/end-point-zh-TW.svg";
 const ICON_TAXI_CAR_URL = "https://overseas-oss.heycars.cn/heycar-map/svg/taxi-car.svg";
 const ICON_DOT_LOADING_URL = "https://overseas-oss.heycars.cn/heycar-map/gif/dot-loading.gif";

package/dist/v2/business-components/AbsoluteAddressBox/AbsoluteAddressBox.js

@@ -1,13 +1,14 @@
-import "../../css/AbsoluteAddressBox-7502ed45.css";
+import "../../css/AbsoluteAddressBox-16283edf.css";
 import { h } from "vue";
 import { computed } from "vue-demi";
 import { ICON_DOT_LOADING_URL } from "../../api/cdn.js";
-import { i as imgAddressLocator } from "../../chunks/address-locator.98305e58.js";
-import { i as imgArrowRight } from "../../chunks/arrow-right.eedc7433.js";
+import { i as imgAddressLocator } from "../../chunks/address-locator.072592a8.js";
+import { i as imgArrowRight } from "../../chunks/arrow-right.c4bcf4de.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { defineSetup } from "../../types/helper.js";
 import { c as createRuntimeFn } from "../../chunks/vanilla-extract-recipes-createRuntimeFn.esm.bd6fc290.js";
-const imgBubbleRightArc = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMGgyLjEzMWExMCAxMCAwIDAxOS42OTYgNy41NTJMMTggMzJILjA0MkwwIDB6IiBmaWxsPSIjMjUzRTdBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=";
-const imgGuideArrow = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHdpZHRoPSIyIiBoZWlnaHQ9IjYiPgogIDxwYXRoIGQ9Ik0uNTE2IDEuMTAzQS4zLjMgMCAwMDAgMS4zMXYyLjY2OGEuMy4zIDAgMDAuNTE2LjIwOEwxLjggMi44NTNhLjMuMyAwIDAwMC0uNDE2TC41MTYgMS4xMDN6IiBmaWxsPSIjRkZGIiAvPgo8L3N2Zz4=";
+const imgBubbleRightArc = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAxOCAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDIuMTMxYTEwIDEwIDAgMDE5LjY5NiA3LjU1MkwxOCAzMkguMDQyTDAgMHoiIGZpbGw9ImhzbCh2YXIoLS1IRVlDQVJfTUFQX1RIRU1FX1ZBUl9QUkFNQVJZX0JBTkRfQV9IVUUsIDIyMCksIDU0JSwgMzElKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+";
+const imgGuideArrow = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHdpZHRoPSIyIiBoZWlnaHQ9IjYiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyIDYiPgogIDxwYXRoIGQ9Ik0uNTE2IDEuMTAzQS4zLjMgMCAwMDAgMS4zMXYyLjY2OGEuMy4zIDAgMDAuNTE2LjIwOEwxLjggMi44NTNhLjMuMyAwIDAwMC0uNDE2TC41MTYgMS4xMDN6IiBmaWxsPSIjRkZGIiAvPgo8L3N2Zz4=";
 const AbsoluteAddressBox_css_ts_vanilla = "";
 var absoluteAddressBox = "n8tgem1";
 var absoluteAddressBoxLayout = "n8tgem0";
@@ -54,7 +55,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
     if (type === "locator")
       return h("div", {
         "class": absoluteAddressBoxLayout
-      }, [h("img", {
+      }, [h(SvgInlineWebComponentTag, {
         "class": locatorIcon,
         "attrs": {
           "src": imgAddressLocator
@@ -84,7 +85,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       "class": boxHeader
     }, [h("div", {
       "class": boxHeaderText
-    }, [description]), h("img", {
+    }, [description]), h(SvgInlineWebComponentTag, {
       "class": boxHeaderIcon,
       "attrs": {
         "src": imgBubbleRightArc
@@ -108,7 +109,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       }
     }, [h("div", {
       "class": boxPhotoDescription
-    }, [photo.title]), h("img", {
+    }, [photo.title]), h(SvgInlineWebComponentTag, {
       "class": boxPhotoArrow,
       "attrs": {
         "src": imgGuideArrow
@@ -127,7 +128,7 @@ const AbsoluteAddressBox = defineSetup("AbsoluteAddressBox", function(props, {
       "attrs": {
         "value": title
       }
-    })]), withArrow && h("img", {
+    })]), withArrow && h(SvgInlineWebComponentTag, {
       "class": arrowRight,
       "attrs": {
         "src": imgArrowRight

package/dist/v2/business-components/AddressLocator/AddressLocator.js

@@ -1,9 +1,10 @@
 import "../../css/AddressLocator-321d2936.css";
 import { h } from "vue";
 import { computed } from "vue-demi";
-import { i as imgAddressLocator } from "../../chunks/address-locator.98305e58.js";
+import { i as imgAddressLocator } from "../../chunks/address-locator.072592a8.js";
 import { AmapMarker } from "../../components/AmapMarker/AmapMarker.js";
 import { GmapAdvancedMarkerElement } from "../../components/GmapAdvancedMarkerElement/GmapAdvancedMarkerElement.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
@@ -13,7 +14,7 @@ const AddressLocator_css_ts_vanilla = "";
 var addressLocator = "rgf09w0";
 const AAddressLocator = defineSetup("AAddressLocator", function(props) {
   const contentRef = computed(() => `
-      <img src="${imgAddressLocator}" class="${addressLocator}">
+      <${SvgInlineWebComponentTag} src="${imgAddressLocator}" class="${addressLocator}">
     `);
   return () => h(AmapMarker, {
     "attrs": {
@@ -24,7 +25,7 @@ const AAddressLocator = defineSetup("AAddressLocator", function(props) {
   });
 });
 const GAddressLocator = defineSetup("GAddressLocator", function(props) {
-  const contentRef = computed(() => createDom("img", {
+  const contentRef = computed(() => createDom(SvgInlineWebComponentTag, {
     class: addressLocator,
     src: imgAddressLocator
   }));

package/dist/v2/business-components/AuxiliaryLine/AuxiliaryLine.js

@@ -11,7 +11,7 @@ import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
 import { vec2lnglat } from "../../utils/transform.js";
-const imgMarkerRed = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEwMjguNCkiPjxwYXRoIGQ9Im0xMiAwYy00LjQxODMgMi4zNjg1ZS0xNSAtOCAzLjU4MTctOCA4IDAgMS40MjEgMC4zODE2IDIuNzUgMS4wMzEyIDMuOTA2IDAuMTA3OSAwLjE5MiAwLjIyMSAwLjM4MSAwLjM0MzggMC41NjNsNi42MjUgMTEuNTMxIDYuNjI1LTExLjUzMWMwLjEwMi0wLjE1MSAwLjE5LTAuMzExIDAuMjgxLTAuNDY5bDAuMDYzLTAuMDk0YzAuNjQ5LTEuMTU2IDEuMDMxLTIuNDg1IDEuMDMxLTMuOTA2IDAtNC40MTgzLTMuNTgyLTgtOC04em0wIDRjMi4yMDkgMCA0IDEuNzkwOSA0IDQgMCAyLjIwOS0xLjc5MSA0LTQgNC0yLjIwOTEgMC00LTEuNzkxLTQtNCAwLTIuMjA5MSAxLjc5MDktNCA0LTR6IiBmaWxsPSIjZTc0YzNjIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEwMjguNCkiLz48cGF0aCBkPSJtMTIgM2MtMi43NjE0IDAtNSAyLjIzODYtNSA1IDAgMi43NjEgMi4yMzg2IDUgNSA1IDIuNzYxIDAgNS0yLjIzOSA1LTUgMC0yLjc2MTQtMi4yMzktNS01LTV6bTAgMmMxLjY1NyAwIDMgMS4zNDMxIDMgM3MtMS4zNDMgMy0zIDMtMy0xLjM0MzEtMy0zIDEuMzQzLTMgMy0zeiIgZmlsbD0iI2MwMzkyYiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxMDI4LjQpIi8+PC9nPjwvc3ZnPg==";
+const imgMarkerRed = "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMGE4IDggMCAwMC04IDhjMCAxLjQyMS4zODIgMi43NSAxLjAzMSAzLjkwNi4xMDguMTkyLjIyMS4zODEuMzQ0LjU2M0wxMiAyNGw2LjYyNS0xMS41MzFjLjEwMi0uMTUxLjE5LS4zMTEuMjgxLS40NjlsLjA2My0uMDk0QTcuOTU0IDcuOTU0IDAgMDAyMCA4YTggOCAwIDAwLTgtOHptMCA0YTQgNCAwIDExMCA4IDQgNCAwIDAxMC04eiIgZmlsbD0iaHNsKHZhcigtLUhFWUNBUl9NQVBfVEhFTUVfVkFSX0ZPUkJJRERFTl9IVUUsIDYpLCA3OCUsIDU3JSkiLz48cGF0aCBkPSJNMTIgM2E1IDUgMCAxMDAgMTAgNSA1IDAgMDAwLTEwem0wIDJhMyAzIDAgMTEwIDYgMyAzIDAgMDEwLTZ6IiBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfRk9SQklEREVOX0hVRSwgNiksIDYzJSwgNDYlKSIvPjwvc3ZnPg==";
 const AAuxiliaryLine = defineSetup("AAuxiliaryLine", function(props) {
   const defaultMarkerSize = 36;
   const redIcon = new AMap.Icon({

package/dist/v2/business-components/BusinessRecomendPlaceMap/BusinessRecomendPlaceMap.js

@@ -27,7 +27,7 @@ import "../GreenZone/GreenZone.js";
 import "../PassengerCircle/PassengerCircle.js";
 import "../PickupPoints/PickupPoints.js";
 import "./useCacheCenterPlace.js";
-import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.18b28e1b.js";
 export {
   B as BusinessRecomendPlaceMap,
   f as BusinessRecomendPlaceMapInner,

package/dist/v2/business-components/BusinessRecomendPlaceMap/index.js

@@ -1,4 +1,4 @@
-import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { B, f, D, E, R, c, a, e, b, d, Z } from "../../chunks/BusinessRecomendPlaceMap.18b28e1b.js";
 export {
   B as BusinessRecomendPlaceMap,
   f as BusinessRecomendPlaceMapInner,

package/dist/v2/business-components/BusinessReselectPlaceMap/BusinessReselectPlaceMap.js

@@ -21,7 +21,7 @@ import { detectBrowserPlatform } from "../../utils/platform.js";
 import { place2point, isPlaceEqual, isZoneEqual, geoPositionError2businessTimeout, pipeDefer } from "../../utils/transform.js";
 import { toCoordinatePlaceType, toCoordinatePointType, toCoordinateRecommendZonePlacesType } from "../../utils/typeChecking.js";
 import { AbsoluteAddressBox } from "../AbsoluteAddressBox/AbsoluteAddressBox.js";
-import { E as EMPTY_PLACE, m as memoize, R as RECOMMEND_PLACE_DRAG_LIMIT, a as RECOMMEND_PLACE_LARGE_LIMIT, b as RECOMMEND_PLACE_ZONE_ICON_MIN, c as RECOMMEND_PLACE_ICON_ZOOM_MIN, d as RECOMMEND_PLACE_ZONE_TEXT_MIN, e as RECOMMEND_PLACE_TEXT_ZOOM_MIN, D as DEFAULT_ZOOM, Z as ZONE_FITVIEW_PANDING } from "../../chunks/BusinessRecomendPlaceMap.7b67c30c.js";
+import { E as EMPTY_PLACE, m as memoize, R as RECOMMEND_PLACE_DRAG_LIMIT, a as RECOMMEND_PLACE_LARGE_LIMIT, b as RECOMMEND_PLACE_ZONE_ICON_MIN, c as RECOMMEND_PLACE_ICON_ZOOM_MIN, d as RECOMMEND_PLACE_ZONE_TEXT_MIN, e as RECOMMEND_PLACE_TEXT_ZOOM_MIN, D as DEFAULT_ZOOM, Z as ZONE_FITVIEW_PANDING } from "../../chunks/BusinessRecomendPlaceMap.18b28e1b.js";
 import { DeviceOrientation } from "../DeviceOrientation/DeviceOrientation.js";
 import { GreenZone } from "../GreenZone/GreenZone.js";
 import { PassengerCircle } from "../PassengerCircle/PassengerCircle.js";
@@ -308,7 +308,7 @@ const BusinessReselectPlaceMapInner = defineSetup("BusinessReselectPlaceMapInner
       }
     }, [((_b = zoneRef.value) == null ? void 0 : _b.path.length) && h(GreenZone, {
       "attrs": {
-        "isRed": isForbidden,
+        "type": isForbidden ? "Forbidden" : "Restricted",
         "path": (_c = zoneRef.value) == null ? void 0 : _c.path
       }
     }), !geoLoading.value && !geoError.value && h(DeviceOrientation, {

package/dist/v2/business-components/DrivingLine/DrivingLine.d.ts

@@ -1,9 +1,12 @@
 import type { TrafficStatus } from "../../types/interface";
 type DrivingLineStatus = TrafficStatus | "DONE";
+type DrivingLineColors = Record<DrivingLineStatus, string>;
 export interface DrivingLineProps {
     status?: DrivingLineStatus;
     path: [number, number][];
     lineCap?: AMap.LineSharedOptions["lineCap"];
+    backgroundColors?: DrivingLineColors;
+    borderColors?: DrivingLineColors;
 }
 export declare const ADrivingLine: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, DrivingLineProps>;
 export declare const GDrivingLine: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<DrivingLineProps>, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").Empty, import("../../types/helper").EmitByProps<DrivingLineProps, Required<DrivingLineProps>>, never, DrivingLineProps>;

package/dist/v2/business-components/DrivingLine/DrivingLine.js

@@ -7,38 +7,38 @@ import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
 import { vec2lnglat } from "../../utils/transform.js";
-const trafficInnerColors = {
-  // UNKNOWN: "#487BF4",
-  UNKNOWN: "#00C875",
-  NORMAL: "#00C875",
-  SLOW: "#F9D100",
-  TRAFFIC_JAM: "#EB0E33",
-  HEAVY_TRAFFIC_JAM: "#99001A",
-  DONE: "#96B2CA"
-};
-const trafficOuterColors = {
-  // UNKNOWN: "#4175F1",
-  UNKNOWN: "#008559",
-  NORMAL: "#008559",
-  SLOW: "#B29400",
-  TRAFFIC_JAM: "#990D24",
-  HEAVY_TRAFFIC_JAM: "#4D000D",
-  DONE: "#7693AF"
+const createBackgroundColors = (theme) => {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    UNKNOWN: `hsl(${(_a = theme == null ? void 0 : theme.TRAFFIC_NORMAL_HUE) != null ? _a : 155}, 100%, 39%)`,
+    NORMAL: `hsl(${(_b = theme == null ? void 0 : theme.TRAFFIC_NORMAL_HUE) != null ? _b : 155}, 100%, 39%)`,
+    SLOW: `hsl(${(_c = theme == null ? void 0 : theme.TRAFFIC_SLOW_HUE) != null ? _c : 50}, 100%, 49%)`,
+    TRAFFIC_JAM: `hsl(${(_d = theme == null ? void 0 : theme.TRAFFIC_JAM_HUE) != null ? _d : 350}, 89%, 49%)`,
+    HEAVY_TRAFFIC_JAM: `hsl(${(_e = theme == null ? void 0 : theme.TRAFFIC_JAM_HUE) != null ? _e : 350}, 100%, 30%)`,
+    DONE: `hsl(${(_f = theme == null ? void 0 : theme.PRIMARY_BAND_B_HUE) != null ? _f : 206}, 34%, 70%)`
+  };
 };
-const trafficBorderColors = {
-  // UNKNOWN: "#6C95F5",
-  UNKNOWN: "#00C875",
-  NORMAL: "#00C875",
-  SLOW: "#F9D100",
-  TRAFFIC_JAM: "#EB0E33",
-  HEAVY_TRAFFIC_JAM: "#99001A",
-  DONE: "#7693AF"
+const createBorderColors = (theme) => {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    UNKNOWN: `hsl(${(_a = theme == null ? void 0 : theme.TRAFFIC_NORMAL_A_HUE) != null ? _a : 160}, 100%, 26%)`,
+    NORMAL: `hsl(${(_b = theme == null ? void 0 : theme.TRAFFIC_NORMAL_A_HUE) != null ? _b : 160}, 100%, 26%)`,
+    SLOW: `hsl(${(_c = theme == null ? void 0 : theme.TRAFFIC_SLOW_HUE) != null ? _c : 50}, 100%, 35%)`,
+    TRAFFIC_JAM: `hsl(${(_d = theme == null ? void 0 : theme.TRAFFIC_JAM_HUE) != null ? _d : 350}, 84%, 33%)`,
+    HEAVY_TRAFFIC_JAM: `hsl(${(_e = theme == null ? void 0 : theme.TRAFFIC_JAM_HUE) != null ? _e : 350}, 100%, 15%)`,
+    DONE: `hsl(${(_f = theme == null ? void 0 : theme.PRIMARY_BAND_B_HUE) != null ? _f : 206}, 27%, 59%)`
+  };
 };
+const defaultBackgroundColors = createBackgroundColors();
+const defaultBorderColors = createBorderColors();
 const ADrivingLine = defineSetup("ADrivingLine", function(props) {
   return () => {
+    var _a, _b;
     const {
       status = "UNKNOWN",
-      lineCap = "round"
+      lineCap = "round",
+      backgroundColors,
+      borderColors
     } = props;
     const vw = window.innerWidth * 0.01;
     const strokeWidth = 1 * vw;
@@ -46,15 +46,14 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
     const dirWidth = 0.24 * vw;
     const outlineWidth = 0.4 * vw;
     const dashLength = 0.3 * vw;
-    const strokeColorInner = trafficInnerColors[status];
-    const strokeColorOuter = trafficOuterColors[status];
-    const strokeColorBorder = trafficBorderColors[status];
+    const backgroundColor = (_a = backgroundColors == null ? void 0 : backgroundColors[status]) != null ? _a : defaultBackgroundColors[status];
+    const borderColor = (_b = borderColors == null ? void 0 : borderColors[status]) != null ? _b : defaultBorderColors[status];
     return h("div", [h(AmapPolyline, {
       "attrs": {
         "path": props.path,
         "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorOuter,
+        "strokeColor": borderColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "zIndex": ZINDEX_LINE_LAYER
@@ -64,7 +63,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
         "path": props.path,
         "strokeWeight": strokeWidth + 2 * borderWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorBorder,
+        "strokeColor": backgroundColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "strokeStyle": "dashed",
@@ -76,7 +75,7 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
         "path": props.path,
         "strokeWeight": strokeWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorInner,
+        "strokeColor": backgroundColor,
         "lineJoin": "round",
         "lineCap": lineCap,
         "zIndex": ZINDEX_LINE_LAYER
@@ -98,8 +97,11 @@ const ADrivingLine = defineSetup("ADrivingLine", function(props) {
 const GDrivingLine = defineSetup("GDrivingLine", function(props) {
   const pathRef = computed(() => props.path.map(vec2lnglat));
   return () => {
+    var _a, _b;
     const {
-      status = "UNKNOWN"
+      status = "UNKNOWN",
+      backgroundColors,
+      borderColors
     } = props;
     const vw = window.innerWidth * 0.01;
     const repeat = 10 * vw;
@@ -107,15 +109,14 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
     const borderWidth = 0.175 * vw * 0.65;
     const dirStrokeWeight = 0.375 * vw * 0.65;
     const outlineWidth = 0.45 * vw * 0.65;
-    const strokeColorInner = trafficInnerColors[status];
-    const strokeColorOuter = trafficOuterColors[status];
-    const strokeColorBorder = trafficBorderColors[status];
+    const backgroundColor = (_a = backgroundColors == null ? void 0 : backgroundColors[status]) != null ? _a : defaultBackgroundColors[status];
+    const borderColor = (_b = borderColors == null ? void 0 : borderColors[status]) != null ? _b : defaultBorderColors[status];
     return h("div", [h(GmapPolyline, {
       "attrs": {
         "path": pathRef.value,
         "strokeWeight": strokeWidth + 2 * borderWidth + 2 * outlineWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorOuter,
+        "strokeColor": borderColor,
         "zIndex": ZINDEX_LINE_LAYER
       }
     }), h(GmapPolyline, {
@@ -125,8 +126,8 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
           icon: {
             path: `M 0,-0.5 0,0.5`,
             strokeWeight: strokeWidth + 2 * borderWidth,
-            strokeColor: strokeColorBorder,
-            fillColor: strokeColorBorder,
+            strokeColor: backgroundColor,
+            fillColor: backgroundColor,
             scale: 1
           },
           repeat: `${strokeWidth}px`,
@@ -139,7 +140,7 @@ const GDrivingLine = defineSetup("GDrivingLine", function(props) {
         "path": pathRef.value,
         "strokeWeight": strokeWidth,
         "strokeOpacity": 1,
-        "strokeColor": strokeColorInner,
+        "strokeColor": backgroundColor,
         "icons": [{
           icon: {
             path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
@@ -159,8 +160,20 @@ const DrivingLine = defineSetup("DrivingLine", function(props) {
   return () => {
     if (!props.path.length)
       return null;
+    const backgroundColors = {
+      ...createBackgroundColors(payload.themeVariables),
+      ...props.backgroundColors
+    };
+    const borderColors = {
+      ...createBorderColors(payload.themeVariables),
+      ...props.borderColors
+    };
     return createElement(payload.supplier === "gmap" ? GDrivingLine : ADrivingLine, {
-      attrs: props
+      attrs: {
+        ...props,
+        backgroundColors,
+        borderColors
+      }
     });
   };
 });

package/dist/v2/business-components/GreenZone/GreenZone.d.ts

@@ -1,8 +1,12 @@
 import type { GmapOverlay, MapRegisterOverlayProps } from "../../hooks/useOverlay";
 import type { Point } from "../../types/interface";
+export type GreenZoneType = "Restricted" | "Forbidden";
+type GreenZoneColors = Record<GreenZoneType, string>;
 interface GreenZoneProps<T> extends MapRegisterOverlayProps<T> {
-    isRed?: boolean;
+    type?: GreenZoneType;
     path: Point[];
+    backgroundColors?: GreenZoneColors;
+    borderColors?: GreenZoneColors;
 }
 export declare const AGreenZone: import("vue-demi").DefineComponent<import("vue3").ComponentObjectPropsOptions<GreenZoneProps<{
     _needUpdate: boolean;

package/dist/v2/business-components/GreenZone/GreenZone.js

@@ -8,12 +8,24 @@ import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
 import { vec2lnglat } from "../../utils/transform.js";
-const GREEN_ZONE_FILL_COLOR = "#C7E5FB";
+const createBackgroundColors = (theme) => {
+  var _a, _b;
+  return {
+    Restricted: `hsl(${(_a = theme == null ? void 0 : theme.PRIMARY_BAND_B_HUE) != null ? _a : 206}, 87%, 88%)`,
+    Forbidden: `hsl(${(_b = theme == null ? void 0 : theme.FORBIDDEN_HUE) != null ? _b : 0}, 82%, 71%)`
+  };
+};
+const createBorderColors = (theme) => {
+  var _a, _b;
+  return {
+    Restricted: `hsl(${(_a = theme == null ? void 0 : theme.PRIMARY_BAND_B_HUE) != null ? _a : 206}, 100%, 65%)`,
+    Forbidden: `hsl(${(_b = theme == null ? void 0 : theme.FORBIDDEN_HUE) != null ? _b : 0}, 91%, 52%)`
+  };
+};
+const defaultBackgroundColors = createBackgroundColors();
+const defaultBorderColors = createBorderColors();
 const GREEN_ZONE_FILL_OPACITY = 0.5;
-const GREEN_ZONE_STROKE_COLOR = "#4BA7FF";
 const GREEN_ZONE_STROKE_WEIGHT_VW = 1;
-const GREEN_ZONE_FILL_COLOR_RED = "#F27878";
-const GREEN_ZONE_STROKE_COLOR_RED = "#F41717";
 const toClosedPath = (path) => {
   const first = path[0];
   if (!first)
@@ -26,14 +38,22 @@ const toClosedPath = (path) => {
 const AGreenZone = defineSetup("AGreenZone", function(props) {
   const strokeWeight = GREEN_ZONE_STROKE_WEIGHT_VW * globalThis.innerWidth / 100;
   return () => {
+    var _a, _b;
+    const {
+      backgroundColors,
+      borderColors,
+      type = "Restricted"
+    } = props;
+    const backgroundColor = (_a = backgroundColors == null ? void 0 : backgroundColors[type]) != null ? _a : defaultBackgroundColors[type];
+    const borderColor = (_b = borderColors == null ? void 0 : borderColors[type]) != null ? _b : defaultBorderColors[type];
     return h(AmapPolygon, {
       "attrs": {
         "registerOverlay": props.registerOverlay,
         "path": props.path,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": borderColor,
         "strokeStyle": "dashed",
         "strokeWeight": strokeWeight,
-        "fillColor": props.isRed ? GREEN_ZONE_FILL_COLOR_RED : GREEN_ZONE_FILL_COLOR,
+        "fillColor": backgroundColor,
         "fillOpacity": GREEN_ZONE_FILL_OPACITY,
         "zIndex": ZINDEX_GREEN_ZONE
       }
@@ -49,23 +69,31 @@ const GGreenZone = defineSetup("GGreenZone", function(props) {
     scale: 4
   };
   return () => {
+    var _a, _b;
+    const {
+      backgroundColors,
+      borderColors,
+      type = "Restricted"
+    } = props;
+    const backgroundColor = (_a = backgroundColors == null ? void 0 : backgroundColors[type]) != null ? _a : defaultBackgroundColors[type];
+    const borderColor = (_b = borderColors == null ? void 0 : borderColors[type]) != null ? _b : defaultBorderColors[type];
     const path = pathRef.value;
     const closedPath = toClosedPath(path);
     return h("div", [h(GmapPolygon, {
       "attrs": {
         "registerOverlay": props.registerOverlay,
         "paths": path,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": borderColor,
         "strokeOpacity": 0,
         "strokeWeight": strokeWeight,
-        "fillColor": props.isRed ? GREEN_ZONE_FILL_COLOR_RED : GREEN_ZONE_FILL_COLOR,
+        "fillColor": backgroundColor,
         "fillOpacity": GREEN_ZONE_FILL_OPACITY,
         "zIndex": ZINDEX_GREEN_ZONE
       }
     }), h(GmapPolyline, {
       "attrs": {
         "path": closedPath,
-        "strokeColor": props.isRed ? GREEN_ZONE_STROKE_COLOR_RED : GREEN_ZONE_STROKE_COLOR,
+        "strokeColor": borderColor,
         "strokeWeight": GREEN_ZONE_STROKE_WEIGHT_VW,
         "strokeOpacity": 0,
         "icons": [{
@@ -83,8 +111,20 @@ const GreenZone = defineSetup("GreenZone", function(props) {
   return () => {
     if (!props.path.length)
       return null;
+    const backgroundColors = {
+      ...createBackgroundColors(payload.themeVariables),
+      ...props.backgroundColors
+    };
+    const borderColors = {
+      ...createBorderColors(payload.themeVariables),
+      ...props.borderColors
+    };
     return createElement(payload.supplier === "gmap" ? GGreenZone : AGreenZone, {
-      attrs: props
+      attrs: {
+        ...props,
+        backgroundColors,
+        borderColors
+      }
     });
   };
 });

package/dist/v2/business-components/PassengerCircle/PassengerCircle.js

@@ -4,6 +4,7 @@ import { computed } from "vue-demi";
 import { ZINDEX_PASSENGER_LAYER } from "../../api/contants.js";
 import { AmapMarker } from "../../components/AmapMarker/AmapMarker.js";
 import { GmapAdvancedMarkerElement } from "../../components/GmapAdvancedMarkerElement/GmapAdvancedMarkerElement.js";
+import { SvgInlineWebComponentTag } from "../../components/SvgInline/SvgInline.web-component.js";
 import { createElement } from "../../demi-polyfill/demi-polyfill.js";
 import { useMapSupplier } from "../../hooks/useMapSupplier.js";
 import { defineSetup } from "../../types/helper.js";
@@ -11,10 +12,10 @@ import { createDom } from "../../utils/dom.js";
 import { vec2lnglat } from "../../utils/transform.js";
 import { FitViewOnce } from "../FitView/FitView.js";
 import { c as createRuntimeFn } from "../../chunks/vanilla-extract-recipes-createRuntimeFn.esm.bd6fc290.js";
-const imgPassengerCircleArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjc3NDUzMDE2IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMzAiIGN5PSIzMCIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgc3Ryb2tlLW9wYWNpdHk9Ii4xIiBzdHJva2U9IiMwMDNERkYiIGZpbGwtb3BhY2l0eT0iLjE1IiBmaWxsPSIjNDg3M0ZFIiBjeD0iMzAiIGN5PSIzMCIgcj0iMjkuNSIvPjxwYXRoIGZpbGw9IiM0ODcxRjEiIGQ9Ik0zMCAxMC41NTdsNi4zNDIgMTIuNjg0SDIzLjY1OHoiLz48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5Ii8+PC9nPjwvc3ZnPg==";
-const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTcuMSUiIHk9Ii03LjElIiB3aWR0aD0iMTE0LjMlIiBoZWlnaHQ9IjExNC4zJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249Ii41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNzc0NTMwMTYgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC40MDUgLjI2NCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0iIzAwM0RGRiIgZmlsbC1vcGFjaXR5PSIuMTUiIGZpbGw9IiM0ODczRkUiIGN4PSIzMCIgY3k9IjMwIiByPSIyOS41Ii8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9IiM0ODcxRjEiIGN4PSIzMCIgY3k9IjMwIiByPSI5LjMiLz48L2c+PC9zdmc+";
-const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTI4LjYlIiB5PSItMjguNiUiIHdpZHRoPSIxNTcuMSUiIGhlaWdodD0iMTU3LjElIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iMTAuNSIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiM0NDcxRkYiIGQ9Ik0xNC40ODEgMGw2LjYwMyAxMy4xODFINy44Nzl6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCkiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjkuMyIvPjwvZz48L2c+PC9zdmc+";
-const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icHJlZml4X19iIiBjeD0iMTU3IiBjeT0iMzUyIiByPSIxMCIvPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzIC0zMzgpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjNDg3MUYxIiBjeD0iMTU3IiBjeT0iMzUyIiByPSI4LjgiLz48L2c+PC9zdmc+";
+const imgPassengerCircleArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMjguNiUiIHk9Ii0yOC42JSIgd2lkdGg9IjE1Ny4xJSIgaGVpZ2h0PSIxNTcuMSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InByZWZpeF9fYSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNzc0NTMwMTYgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0iaHNsKHZhcigtLUhFWUNBUl9NQVBfVEhFTUVfVkFSX1BSQU1BUllfQkFORF9IVUUsIDIyNiksIDEwMCUsIDUwJSkiIGZpbGwtb3BhY2l0eT0iLjE1IiBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfUFJBTUFSWV9CQU5EX0hVRSwgMjI2KSwgMTAwJSwgNjMlLCAwLjE1KSIgY3g9IjMwIiBjeT0iMzAiIHI9IjI5LjUiLz48cGF0aCBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfUFJBTUFSWV9CQU5EX0hVRSwgMjI2KSwgMTAwJSwgNjMlKSIgZD0iTTMwIDEwLjU1N2w2LjM0MiAxMi42ODRIMjMuNjU4eiIvPjx1c2UgZmlsbD0iIzAwMCIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWpvaW49InNxdWFyZSIgZmlsbD0iaHNsKHZhcigtLUhFWUNBUl9NQVBfVEhFTUVfVkFSX1BSQU1BUllfQkFORF9IVUUsIDIyNiksIDEwMCUsIDYzJSkiIGN4PSIzMCIgY3k9IjMwIiByPSI5Ii8+PC9nPjwvc3ZnPg==";
+const imgPassengerCircle = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjEiIGhlaWdodD0iNjEiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCA2MSA2MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItNy4xJSIgeT0iLTcuMSUiIHdpZHRoPSIxMTQuMyUiIGhlaWdodD0iMTE0LjMlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwYXNzZW5nZXItY2lyY2xlX3ByZWZpeF9fYSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjc3NDUzMDE2IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icGFzc2VuZ2VyLWNpcmNsZV9wcmVmaXhfX2IiIGN4PSIzMCIgY3k9IjMwIiByPSIxMC41Ii8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC40MDUgLjI2NCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjEiIHN0cm9rZT0iaHNsKHZhcigtLUhFWUNBUl9NQVBfVEhFTUVfVkFSX1BSQU1BUllfQkFORF9IVUUsIDIyNiksIDEwMCUsIDUwJSkiIGZpbGwtb3BhY2l0eT0iLjE1IiBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfUFJBTUFSWV9CQU5EX0hVRSwgMjI2KSwgMTAwJSwgNjMlLCAwLjE1KSIgY3g9IjMwIiBjeT0iMzAiIHI9IjI5LjUiLz48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwYXNzZW5nZXItY2lyY2xlX3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwYXNzZW5nZXItY2lyY2xlX3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGZpbGw9ImhzbCh2YXIoLS1IRVlDQVJfTUFQX1RIRU1FX1ZBUl9QUkFNQVJZX0JBTkRfSFVFLCAyMjYpLCAxMDAlLCA2MyUpIiBjeD0iMzAiIGN5PSIzMCIgcj0iOS4zIi8+PC9nPjwvc3ZnPg==";
+const imgPassengerSmallArrow = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMzQiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyOSAzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMjguNiUiIHk9Ii0yOC42JSIgd2lkdGg9IjE1Ny4xJSIgaGVpZ2h0PSIxNTcuMSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InBhc3Nlbmdlci1zbWFsbC1hcnJvd19wcmVmaXhfX2EiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48Y2lyY2xlIGlkPSJwYXNzZW5nZXItc21hbGwtYXJyb3dfcHJlZml4X19iIiBjeD0iMTAuNSIgY3k9IjE5LjUiIHI9IjEwLjUiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfUFJBTUFSWV9CQU5EX0hVRSwgMjI2KSwgMTAwJSwgNjMlKSIgZD0iTTE0LjQ4MSAwbDYuNjAzIDEzLjE4MUg3Ljg3OXoiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0KSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcGFzc2VuZ2VyLXNtYWxsLWFycm93X3ByZWZpeF9fYSkiIHhsaW5rOmhyZWY9IiNwYXNzZW5nZXItc21hbGwtYXJyb3dfcHJlZml4X19iIi8+PGNpcmNsZSBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMi40IiBzdHJva2UtbGluZWpvaW49InNxdWFyZSIgZmlsbD0iaHNsKHZhcigtLUhFWUNBUl9NQVBfVEhFTUVfVkFSX1BSQU1BUllfQkFORF9IVUUsIDIyNiksIDEwMCUsIDYzJSkiIGN4PSIxMC41IiBjeT0iMTkuNSIgcj0iOS4zIi8+PC9nPjwvZz48L3N2Zz4=";
+const imgPassengerSmall = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwYXNzZW5nZXItc21hbGxfcHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PGNpcmNsZSBpZD0icGFzc2VuZ2VyLXNtYWxsX3ByZWZpeF9fYiIgY3g9IjE1NyIgY3k9IjM1MiIgcj0iMTAiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0MyAtMzM4KSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwYXNzZW5nZXItc21hbGxfcHJlZml4X19hKSIgeGxpbms6aHJlZj0iI3Bhc3Nlbmdlci1zbWFsbF9wcmVmaXhfX2IiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyLjQiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSJoc2wodmFyKC0tSEVZQ0FSX01BUF9USEVNRV9WQVJfUFJBTUFSWV9CQU5EX0hVRSwgMjI2KSwgMTAwJSwgNjMlKSIgY3g9IjE1NyIgY3k9IjM1MiIgcj0iOC44Ii8+PC9nPjwvc3ZnPg==";
 const PassengerCircle_css_ts_vanilla = "";
 var passengerCircle = createRuntimeFn({ defaultClassName: "_1l6offo0", variantClassNames: { type: { small: "_1l6offo1", smallArrow: "_1l6offo2", large: "_1l6offo3", largeArrow: "_1l6offo4" } }, defaultVariants: {}, compoundVariants: [] });
 const APassengerCircle = defineSetup("APassengerCircle", function(props) {
@@ -27,7 +28,7 @@ const APassengerCircle = defineSetup("APassengerCircle", function(props) {
     const style = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
     return `
-        <img class="APassengerCircle ${passengerCircle({
+        <${SvgInlineWebComponentTag} class="APassengerCircle ${passengerCircle({
       type
     })}" style="${style}" src="${src}">
       `;
@@ -53,7 +54,7 @@ const GPassengerCircle = defineSetup("GPassengerCircle", function(props) {
     const src = size === "large" ? angle === void 0 ? imgPassengerCircle : imgPassengerCircleArrow : angle === void 0 ? imgPassengerSmall : imgPassengerSmallArrow;
     const style = angle === void 0 ? "" : `transform: rotate(var(${angle}))`;
     const type = size === "large" ? angle === void 0 ? "large" : "largeArrow" : angle === void 0 ? "small" : "smallArrow";
-    return createDom("img", {
+    return createDom(SvgInlineWebComponentTag, {
       class: `GPassengerCircle ${passengerCircle({
         type
       })}`,