npm - @opentripplanner/vehicle-rental-overlay - Versions diffs - 2.0.0-alpha.1 → 2.0.1 - Mend

@opentripplanner/vehicle-rental-overlay 2.0.0-alpha.1 → 2.0.1

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 (22) hide show

package/esm/StationPopup.js +4 -4
package/esm/StationPopup.js.map +1 -1
package/esm/index.js +39 -37
package/esm/index.js.map +1 -1
package/esm/styled.js +2 -2
package/esm/styled.js.map +1 -1
package/lib/StationPopup.d.ts +2 -1
package/lib/StationPopup.d.ts.map +1 -1
package/lib/StationPopup.js +3 -3
package/lib/StationPopup.js.map +1 -1
package/lib/index.d.ts +7 -6
package/lib/index.d.ts.map +1 -1
package/lib/index.js +37 -37
package/lib/index.js.map +1 -1
package/lib/styled.js +2 -2
package/lib/styled.js.map +1 -1
package/package.json +5 -5
package/src/StationPopup.tsx +6 -6
package/src/VehicleRentalOverlay.story.tsx +14 -16
package/src/index.tsx +41 -40
package/src/styled.ts +3 -3
package/tsconfig.tsbuildinfo +1 -4891

package/lib/index.js CHANGED Viewed

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
-var _reactMapGl = require("react-map-gl");
+var _baseMap = require("@opentripplanner/base-map");
 var _react = _interopRequireWildcard(require("react"));
-var _baseMap = require("@opentripplanner/base-map");
+var _reactMapGl = require("react-map-gl");
 var _StationPopup = _interopRequireDefault(require("./StationPopup"));
@@ -46,22 +46,21 @@ const checkIfPositionInViewport = (bounds, lat, lng) => {
  * types. This layer can be configured to show different styles of markers at
  * different zoom levels.
  */
-const VehicleRentalOverlay = props => {
+const VehicleRentalOverlay = ({
+  companies,
+  configCompanies,
+  getStationName,
+  id,
+  refreshVehicles,
+  setLocation,
+  stations,
+  visible
+}) => {
   const {
-    mainMap
+    current: map
   } = (0, _reactMapGl.useMap)();
-  const zoom = mainMap === null || mainMap === void 0 ? void 0 : mainMap.getZoom();
-  const bounds = mainMap === null || mainMap === void 0 ? void 0 : mainMap.getBounds();
-  const {
-    configCompanies,
-    companies,
-    getStationName,
-    id,
-    refreshVehicles,
-    setLocation,
-    stations,
-    visible
-  } = props;
+  const zoom = map === null || map === void 0 ? void 0 : map.getZoom();
+  const bounds = map === null || map === void 0 ? void 0 : map.getBounds();
   const layerId = `rental-vehicles-${id}`;
   const [clickedVehicle, setClickedVehicle] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
@@ -76,21 +75,22 @@ const VehicleRentalOverlay = props => {
   (0, _react.useEffect)(() => {
     const VEHICLE_LAYERS = [layerId];
     VEHICLE_LAYERS.forEach(stopLayer => {
-      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("mouseenter", stopLayer, () => {
-        mainMap.getCanvas().style.cursor = "pointer";
+      map === null || map === void 0 ? void 0 : map.on("mouseenter", stopLayer, () => {
+        map.getCanvas().style.cursor = "pointer";
       });
-      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("mouseleave", stopLayer, () => {
-        mainMap.getCanvas().style.cursor = "";
+      map === null || map === void 0 ? void 0 : map.on("mouseleave", stopLayer, () => {
+        map.getCanvas().style.cursor = "";
       });
-      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("click", stopLayer, event => {
+      map === null || map === void 0 ? void 0 : map.on("click", stopLayer, event => {
         var _event$features;
         setClickedVehicle((_event$features = event.features) === null || _event$features === void 0 ? void 0 : _event$features[0].properties);
       });
     });
-  }, [mainMap]); // Don't render if no map or no stops are defined.
+  }, [map]); // Don't render if no map or no stops are defined.
   if (visible === false || !stations || stations.length === 0) {
+    // Null can't be returned here -- react-map-gl dislikes null values as children
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
@@ -99,14 +99,14 @@ const VehicleRentalOverlay = props => {
     features: stations.filter(vehicle => // Include specified companies only if companies is specified and network info is available
     !companies || !vehicle.networks || companies.includes(vehicle.networks[0])).map(vehicle => ({
       type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [vehicle.x, vehicle.y]
+      },
       properties: { ...vehicle,
         networks: JSON.stringify(vehicle.networks),
         "stroke-width": vehicle.isFloatingBike || vehicle.isFloatingVehicle ? 1 : 2,
         color: getColorForStation(vehicle)
-      },
-      geometry: {
-        type: "Point",
-        coordinates: [vehicle.x, vehicle.y]
       }
     }))
   };
@@ -115,16 +115,15 @@ const VehicleRentalOverlay = props => {
     data: vehiclesGeoJSON
   }, /*#__PURE__*/_react.default.createElement(_reactMapGl.Layer, {
     id: layerId,
-    type: "circle",
     paint: {
       "circle-color": ["get", "color"],
       "circle-opacity": 0.9,
-      "circle-stroke-width": ["get", "stroke-width"],
-      "circle-stroke-color": "#333"
-    }
+      "circle-stroke-color": "#333",
+      "circle-stroke-width": ["get", "stroke-width"]
+    },
+    type: "circle"
   })), zoom >= DETAILED_MARKER_CUTOFF && stations.filter(station => checkIfPositionInViewport(bounds, station.y, station.x)).map(station => /*#__PURE__*/_react.default.createElement(_baseMap.MarkerWithPopup, {
     key: station.id,
-    position: [station.y, station.x],
     popupContents: /*#__PURE__*/_react.default.createElement(_StationPopup.default, {
       configCompanies: configCompanies,
       setLocation: location => {
@@ -133,26 +132,27 @@ const VehicleRentalOverlay = props => {
       },
       getStationName: getStationName,
       station: station
-    })
+    }),
+    position: [station.y, station.x]
   }, station.bikesAvailable !== undefined && !station.isFloatingBike && !station.isFloatingVehicle && station.spacesAvailable !== undefined ? /*#__PURE__*/_react.default.createElement(_styled.BaseBikeRentalIcon, {
     percent: (station === null || station === void 0 ? void 0 : station.bikesAvailable) / ((station === null || station === void 0 ? void 0 : station.bikesAvailable) + (station === null || station === void 0 ? void 0 : station.spacesAvailable))
   }) : /*#__PURE__*/_react.default.createElement(_styled.StationMarker, {
     width: 12,
     color: getColorForStation(station)
   }))), clickedVehicle && /*#__PURE__*/_react.default.createElement(_reactMapGl.Popup, {
+    latitude: clickedVehicle.y,
+    longitude: clickedVehicle.x,
+    maxWidth: "100%",
     onClose: () => {
       setClickedVehicle(null);
-    },
-    longitude: clickedVehicle.x,
-    latitude: clickedVehicle.y,
-    maxWidth: "100%"
+    }
   }, /*#__PURE__*/_react.default.createElement(_StationPopup.default, {
     configCompanies: configCompanies,
+    getStationName: getStationName,
     setLocation: location => {
       setClickedVehicle(null);
       setLocation(location);
     },
-    getStationName: getStationName,
     station: { ...clickedVehicle,
       networks: JSON.parse(clickedVehicle.networks)
     }

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"names":["DETAILED_MARKER_CUTOFF","getColorForStation","v","isFloatingCar","isFloatingVehicle","bikesAvailable","undefined","isFloatingBike","checkIfPositionInViewport","bounds","lat","lng","PADDING","sw","ne","_sw","_ne","VehicleRentalOverlay","props","mainMap","zoom","getZoom","getBounds","configCompanies","companies","getStationName","id","refreshVehicles","setLocation","stations","visible","layerId","clickedVehicle","setClickedVehicle","setInterval","VEHICLE_LAYERS","forEach","stopLayer","on","getCanvas","style","cursor","event","features","properties","length","vehiclesGeoJSON","type","filter","vehicle","networks","includes","map","JSON","stringify","color","geometry","coordinates","x","y","station","location","spacesAvailable","parse"],"mappings":"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","sourcesContent":["import { Source, Layer, useMap, Popup } from \"react-map-gl\";\nimport { EventData } from \"mapbox-gl\";\nimport React, { useEffect, useState } from \"react\";\nimport {\n Company,\n Station,\n MapLocationActionArg,\n ConfiguredCompany\n} from \"@opentripplanner/types\";\nimport { MarkerWithPopup } from \"@opentripplanner/base-map\";\nimport StationPopup from \"./StationPopup\";\nimport { BaseBikeRentalIcon, StationMarker } from \"./styled\";\n\n// TODO: Make configurable?\nconst DETAILED_MARKER_CUTOFF = 16;\n\nconst getColorForStation = (v: Station) => {\n if (v.isFloatingCar) return \"#009cde\";\n if (v.isFloatingVehicle) return \"#f5a729\";\n // TODO: nicer color to match transitive\n if (v.bikesAvailable !== undefined \|\| v.isFloatingBike) return \"#f00\";\n return \"gray\";\n};\n\nconst checkIfPositionInViewport = (\n bounds: mapboxgl.LngLatBounds,\n lat: number,\n lng: number\n): boolean => {\n const PADDING = 0.001;\n // @ts-expect-error types appear to be wrong? version issue?\n // eslint-disable-next-line no-underscore-dangle\n const [sw, ne] = [bounds._sw, bounds._ne];\n if (!sw \|\| !ne) return false;\n\n return (\n lat >= sw.lat - PADDING &&\n lat <= ne.lat + PADDING &&\n lng >= sw.lng - PADDING &&\n lng <= ne.lng + PADDING\n );\n};\n\ntype Props = {\n /*\n The entire companies config array.\n /\n configCompanies: ConfiguredCompany[];\n /\n A list of companies that are applicable to just this instance of the\n * overlay.\n /\n companies?: string[];\n /\n An id, used to make this layer uniquely identifiable\n /\n id: string;\n /\n An optional custom function to create a string name of a particular vehicle\n * rental station. This function takes two arguments of the configCompanies\n * prop and a vehicle rental station. The function must return a string.\n /\n getStationName?: (configCompanies: Company[], station: Station) => string;\n /\n If specified, a function that will be triggered every 30 seconds whenever this layer is\n * visible.\n /\n refreshVehicles?: () => void;\n /\n A callback for when a user clicks on setting this stop as either the from\n * or to location of a new search.\n \n This will be dispatched with the following argument:\n \n ```js\n * {\n * location: {\n * lat: number,\n * lon: number,\n * name: string\n * },\n * locationType: \"from\" or \"to\"\n * }\n * ```\n /\n setLocation?: (arg: MapLocationActionArg) => void;\n /\n A list of the vehicle rental stations specific to this overlay instance.\n /\n stations: Station[];\n /\n Whether the overlay is currently visible.\n /\n visible?: boolean;\n /\n TODO: Add props for overriding symbols?\n /\n};\n\n/\n This vehicle rental overlay can be used to render vehicle rentals of various\n * types. This layer can be configured to show different styles of markers at\n * different zoom levels.\n /\nconst VehicleRentalOverlay = (props: Props): JSX.Element => {\n const { mainMap } = useMap();\n const zoom = mainMap?.getZoom();\n const bounds = mainMap?.getBounds();\n\n const {\n configCompanies,\n companies,\n getStationName,\n id,\n refreshVehicles,\n setLocation,\n stations,\n visible\n } = props;\n const layerId = `rental-vehicles-${id}`;\n const [clickedVehicle, setClickedVehicle] = useState(null);\n\n useEffect(() => {\n // TODO: Make 30s configurable?\n if (!refreshVehicles \|\| typeof refreshVehicles !== \"function\") {\n return;\n }\n\n refreshVehicles();\n setInterval(refreshVehicles, 30_000);\n }, [refreshVehicles]);\n\n useEffect(() => {\n const VEHICLE_LAYERS = [layerId];\n VEHICLE_LAYERS.forEach(stopLayer => {\n mainMap?.on(\"mouseenter\", stopLayer, () => {\n mainMap.getCanvas().style.cursor = \"pointer\";\n });\n mainMap?.on(\"mouseleave\", stopLayer, () => {\n mainMap.getCanvas().style.cursor = \"\";\n });\n mainMap?.on(\"click\", stopLayer, (event: EventData) => {\n setClickedVehicle(event.features?.[0].properties);\n });\n });\n }, [mainMap]);\n\n // Don't render if no map or no stops are defined.\n if (visible === false \|\| !stations \|\| stations.length === 0) {\n return <></>;\n }\n\n const vehiclesGeoJSON: GeoJSON.FeatureCollection = {\n type: \"FeatureCollection\",\n features: stations\n .filter(\n vehicle =>\n // Include specified companies only if companies is specified and network info is available\n !companies \|\|\n !vehicle.networks \|\|\n companies.includes(vehicle.networks[0])\n )\n .map(vehicle => ({\n type: \"Feature\",\n properties: {\n ...vehicle,\n networks: JSON.stringify(vehicle.networks),\n \"stroke-width\":\n vehicle.isFloatingBike \|\| vehicle.isFloatingVehicle ? 1 : 2,\n color: getColorForStation(vehicle)\n },\n geometry: { type: \"Point\", coordinates: [vehicle.x, vehicle.y] }\n }))\n };\n\n return (\n <>\n {zoom < DETAILED_MARKER_CUTOFF && (\n <Source type=\"geojson\" data={vehiclesGeoJSON}>\n <Layer\n id={layerId}\n type=\"circle\"\n paint={{\n \"circle-color\": [\"get\", \"color\"],\n \"circle-opacity\": 0.9,\n \"circle-stroke-width\": [\"get\", \"stroke-width\"],\n \"circle-stroke-color\": \"#333\"\n }}\n />\n {/ this is where we add the symbols layer. add a second layer that gets swapped in and out dynamically */}\n </Source>\n )}\n {zoom >= DETAILED_MARKER_CUTOFF &&\n stations\n .filter(station =>\n checkIfPositionInViewport(bounds, station.y, station.x)\n )\n .map(station => (\n <MarkerWithPopup\n key={station.id}\n position={[station.y, station.x]}\n popupContents={\n <StationPopup\n configCompanies={configCompanies}\n setLocation={location => {\n setClickedVehicle(null);\n setLocation(location);\n }}\n getStationName={getStationName}\n station={station}\n />\n }\n >\n {station.bikesAvailable !== undefined &&\n !station.isFloatingBike &&\n !station.isFloatingVehicle &&\n station.spacesAvailable !== undefined ? (\n <BaseBikeRentalIcon\n percent={\n station?.bikesAvailable /\n (station?.bikesAvailable + station?.spacesAvailable)\n }\n />\n ) : (\n <StationMarker width={12} color={getColorForStation(station)} />\n )}\n </MarkerWithPopup>\n ))}\n {clickedVehicle && (\n <Popup\n onClose={() => {\n setClickedVehicle(null);\n }}\n longitude={clickedVehicle.x}\n latitude={clickedVehicle.y}\n maxWidth=\"100%\"\n >\n <StationPopup\n configCompanies={configCompanies}\n setLocation={location => {\n setClickedVehicle(null);\n setLocation(location);\n }}\n getStationName={getStationName}\n station={{\n ...clickedVehicle,\n networks: JSON.parse(clickedVehicle.networks)\n }}\n />\n </Popup>\n )}\n </>\n );\n};\nexport default VehicleRentalOverlay;\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../src/index.tsx"],"names":["DETAILED_MARKER_CUTOFF","getColorForStation","v","isFloatingCar","isFloatingVehicle","bikesAvailable","undefined","isFloatingBike","checkIfPositionInViewport","bounds","lat","lng","PADDING","sw","ne","_sw","_ne","VehicleRentalOverlay","companies","configCompanies","getStationName","id","refreshVehicles","setLocation","stations","visible","current","map","zoom","getZoom","getBounds","layerId","clickedVehicle","setClickedVehicle","setInterval","VEHICLE_LAYERS","forEach","stopLayer","on","getCanvas","style","cursor","event","features","properties","length","vehiclesGeoJSON","type","filter","vehicle","networks","includes","geometry","coordinates","x","y","JSON","stringify","color","station","location","spacesAvailable","parse"],"mappings":"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","sourcesContent":["import { MarkerWithPopup } from \"@opentripplanner/base-map\";\nimport {\n Company,\n ConfiguredCompany,\n MapLocationActionArg,\n Station\n} from \"@opentripplanner/types\";\nimport { EventData } from \"mapbox-gl\";\nimport React, { useEffect, useState } from \"react\";\nimport { Layer, Popup, Source, useMap } from \"react-map-gl\";\n\nimport StationPopup from \"./StationPopup\";\nimport { BaseBikeRentalIcon, StationMarker } from \"./styled\";\n\n// TODO: Make configurable?\nconst DETAILED_MARKER_CUTOFF = 16;\n\nconst getColorForStation = (v: Station) => {\n if (v.isFloatingCar) return \"#009cde\";\n if (v.isFloatingVehicle) return \"#f5a729\";\n // TODO: nicer color to match transitive\n if (v.bikesAvailable !== undefined \|\| v.isFloatingBike) return \"#f00\";\n return \"gray\";\n};\n\nconst checkIfPositionInViewport = (\n bounds: mapboxgl.LngLatBounds,\n lat: number,\n lng: number\n): boolean => {\n const PADDING = 0.001;\n // @ts-expect-error types appear to be wrong? version issue?\n // eslint-disable-next-line no-underscore-dangle\n const [sw, ne] = [bounds._sw, bounds._ne];\n if (!sw \|\| !ne) return false;\n\n return (\n lat >= sw.lat - PADDING &&\n lat <= ne.lat + PADDING &&\n lng >= sw.lng - PADDING &&\n lng <= ne.lng + PADDING\n );\n};\n\ntype Props = {\n /*\n A list of companies that are applicable to just this instance of the\n * overlay.\n /\n companies?: string[];\n /\n The entire companies config array.\n /\n configCompanies: ConfiguredCompany[];\n /\n An id, used to make this layer uniquely identifiable\n /\n id: string;\n /\n An optional custom function to create a string name of a particular vehicle\n * rental station. This function takes two arguments of the configCompanies\n * prop and a vehicle rental station. The function must return a string.\n /\n getStationName?: (configCompanies: Company[], station: Station) => string;\n /\n If specified, a function that will be triggered every 30 seconds whenever this layer is\n * visible.\n /\n refreshVehicles?: () => void;\n /\n A callback for when a user clicks on setting this stop as either the from\n * or to location of a new search.\n \n This will be dispatched with the following argument:\n \n ```js\n * {\n * location: {\n * lat: number,\n * lon: number,\n * name: string\n * },\n * locationType: \"from\" or \"to\"\n * }\n * ```\n /\n setLocation?: (arg: MapLocationActionArg) => void;\n /\n A list of the vehicle rental stations specific to this overlay instance.\n /\n stations: Station[];\n /\n Whether the overlay is currently visible.\n /\n visible?: boolean;\n /\n TODO: Add props for overriding symbols?\n /\n};\n\n/\n This vehicle rental overlay can be used to render vehicle rentals of various\n * types. This layer can be configured to show different styles of markers at\n * different zoom levels.\n /\nconst VehicleRentalOverlay = ({\n companies,\n configCompanies,\n getStationName,\n id,\n refreshVehicles,\n setLocation,\n stations,\n visible\n}: Props): JSX.Element => {\n const { current: map } = useMap();\n const zoom = map?.getZoom();\n const bounds = map?.getBounds();\n\n const layerId = `rental-vehicles-${id}`;\n const [clickedVehicle, setClickedVehicle] = useState(null);\n\n useEffect(() => {\n // TODO: Make 30s configurable?\n if (!refreshVehicles \|\| typeof refreshVehicles !== \"function\") {\n return;\n }\n\n refreshVehicles();\n setInterval(refreshVehicles, 30_000);\n }, [refreshVehicles]);\n\n useEffect(() => {\n const VEHICLE_LAYERS = [layerId];\n VEHICLE_LAYERS.forEach(stopLayer => {\n map?.on(\"mouseenter\", stopLayer, () => {\n map.getCanvas().style.cursor = \"pointer\";\n });\n map?.on(\"mouseleave\", stopLayer, () => {\n map.getCanvas().style.cursor = \"\";\n });\n map?.on(\"click\", stopLayer, (event: EventData) => {\n setClickedVehicle(event.features?.[0].properties);\n });\n });\n }, [map]);\n\n // Don't render if no map or no stops are defined.\n if (visible === false \|\| !stations \|\| stations.length === 0) {\n // Null can't be returned here -- react-map-gl dislikes null values as children\n return <></>;\n }\n\n const vehiclesGeoJSON: GeoJSON.FeatureCollection = {\n type: \"FeatureCollection\",\n features: stations\n .filter(\n vehicle =>\n // Include specified companies only if companies is specified and network info is available\n !companies \|\|\n !vehicle.networks \|\|\n companies.includes(vehicle.networks[0])\n )\n .map(vehicle => ({\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [vehicle.x, vehicle.y] },\n properties: {\n ...vehicle,\n networks: JSON.stringify(vehicle.networks),\n \"stroke-width\":\n vehicle.isFloatingBike \|\| vehicle.isFloatingVehicle ? 1 : 2,\n color: getColorForStation(vehicle)\n }\n }))\n };\n\n return (\n <>\n {zoom < DETAILED_MARKER_CUTOFF && (\n <Source type=\"geojson\" data={vehiclesGeoJSON}>\n <Layer\n id={layerId}\n paint={{\n \"circle-color\": [\"get\", \"color\"],\n \"circle-opacity\": 0.9,\n \"circle-stroke-color\": \"#333\",\n \"circle-stroke-width\": [\"get\", \"stroke-width\"]\n }}\n type=\"circle\"\n />\n {/ this is where we add the symbols layer. add a second layer that gets swapped in and out dynamically */}\n </Source>\n )}\n {zoom >= DETAILED_MARKER_CUTOFF &&\n stations\n .filter(station =>\n checkIfPositionInViewport(bounds, station.y, station.x)\n )\n .map(station => (\n <MarkerWithPopup\n key={station.id}\n popupContents={\n <StationPopup\n configCompanies={configCompanies}\n setLocation={location => {\n setClickedVehicle(null);\n setLocation(location);\n }}\n getStationName={getStationName}\n station={station}\n />\n }\n position={[station.y, station.x]}\n >\n {station.bikesAvailable !== undefined &&\n !station.isFloatingBike &&\n !station.isFloatingVehicle &&\n station.spacesAvailable !== undefined ? (\n <BaseBikeRentalIcon\n percent={\n station?.bikesAvailable /\n (station?.bikesAvailable + station?.spacesAvailable)\n }\n />\n ) : (\n <StationMarker width={12} color={getColorForStation(station)} />\n )}\n </MarkerWithPopup>\n ))}\n {clickedVehicle && (\n <Popup\n latitude={clickedVehicle.y}\n longitude={clickedVehicle.x}\n maxWidth=\"100%\"\n onClose={() => {\n setClickedVehicle(null);\n }}\n >\n <StationPopup\n configCompanies={configCompanies}\n getStationName={getStationName}\n setLocation={location => {\n setClickedVehicle(null);\n setLocation(location);\n }}\n station={{\n ...clickedVehicle,\n networks: JSON.parse(clickedVehicle.networks)\n }}\n />\n </Popup>\n )}\n </>\n );\n};\nexport default VehicleRentalOverlay;\n"],"file":"index.js"}

package/lib/styled.js CHANGED Viewed

@@ -61,12 +61,12 @@ const getPctIcon = percent => {
 const BaseBikeRentalIcon = _styledComponents.default.div.withConfig({
   displayName: "styled__BaseBikeRentalIcon",
   componentId: "sc-1lr3k75-0"
-})(["background-size:contain;background-position:center;background-repeat:no-repeat;margin:auto;width:24px;height:24px;", ""], props => getPctIcon(props.percent));
+})(["background-position:center;background-repeat:no-repeat;background-size:contain;height:24px;margin:auto;width:24px;", ""], props => getPctIcon(props.percent));
 exports.BaseBikeRentalIcon = BaseBikeRentalIcon;
 const StationMarker = (0, _styledComponents.default)(_MapMarkerAlt.MapMarkerAlt).withConfig({
   displayName: "styled__StationMarker",
   componentId: "sc-1lr3k75-1"
-})(["height:12;width:12;color:", ";"], props => props.color);
+})(["color:", ";height:12;width:12;"], props => props.color);
 exports.StationMarker = StationMarker;
 //# sourceMappingURL=styled.js.map

package/lib/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/styled.ts"],"names":["getPctIcon","percent","Math","floor","BaseBikeRentalIcon","styled","div","props","StationMarker","MapMarkerAlt","color"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,MAAMA,UAAU,GAAIC,OAAD,IAAqB;AACtC,UAAQC,IAAI,CAACC,KAAL,CAAWF,OAAO,GAAG,EAArB,CAAR;AACE,SAAK,CAAL;AACE,aAAO,kjDAAP;;AACF,SAAK,CAAL;AACE,aAAO,0sDAAP;;AACF,SAAK,CAAL;AACE,aAAO,i0DAAP;;AACF,SAAK,CAAL;AACE,aAAO,07DAAP;;AACF,SAAK,CAAL;AACE,aAAO,kjEAAP;;AACF,SAAK,CAAL;AACE,aAAO,sqEAAP;;AACF,SAAK,CAAL;AACE,aAAO,kyEAAP;;AACF,SAAK,CAAL;AACE,aAAO,85EAAP;;AACF,SAAK,CAAL;AACE,aAAO,khFAAP;;AACF,SAAK,CAAL;AACE,aAAO,8oFAAP;;AACF,SAAK,EAAL;AACE,aAAO,siCAAP;;AACF;AACE,aAAO,kjDAAP;AAxBJ;AA0BD,CA3BD;AA4BA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+HAO3BC,KAAK,IAAIP,UAAU,CAACO,KAAK,CAACN,OAAP,CAPQ,CAAxB;;;AAUA,MAAMO,aAAa,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,uCAGfF,KAAK,IAAIA,KAAK,CAACG,KAHA,CAAnB","sourcesContent":["import styled from \"styled-components\";\nimport { MapMarkerAlt } from \"@styled-icons/fa-solid/MapMarkerAlt\";\n\nconst getPctIcon = (percent: number) => {\n switch (Math.floor(percent * 10)) {\n case 0:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n case 1:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 2:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\")';\n case 3:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 4:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 5:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjU0LjU1IDQuNjkgNDIuODYgMzYuNTkgMzguOTIgMzUuNiAyNy44MyA0LjM5IDU0LjU1IDQuNjkiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNDEuMSA4MC4wNyA0MS4xNSA0Ni4wOSAzNy4xMSA0NS42NSAxNS45MiA3MS4xMSA0MS4xIDgwLjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjE1Ljk2IDcwLjc4IDM3LjkxIDQ0Ljg1IDM1LjExIDQxLjkxIDIuNDkgNDcuNjkgMTUuOTYgNzAuNzgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMi45MiA0OC4wNyAzNi4zOCA0Mi4xNyAzNi4xIDM4LjEyIDcuMzMgMjEuNyAyLjkyIDQ4LjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjcuMTEgMjEuNzEgMzYuNjggMzguNDUgMzkuMDQgMzUuMTUgMjcuMjkgNC4xOCA3LjExIDIxLjcxIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n case 6:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 7:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 8:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItODwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjY2LjM5IDcxIDQ0LjQ0IDQ1LjA2IDQ3LjI0IDQyLjEzIDc5Ljg2IDQ3LjkxIDY2LjM5IDcxIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 9:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItOTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjI1IDgwLjI4IDQxLjIgNDYuMzEgNDUuMjQgNDUuODcgNjYuNDMgNzEuMzIgNDEuMjUgODAuMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNjYuMzkgNzEgNDQuNDQgNDUuMDYgNDcuMjQgNDIuMTMgNzkuODYgNDcuOTEgNjYuMzkgNzEiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzkuNDMgNDguMjggNDUuOTcgNDIuMzggNDYuMjUgMzguMzMgNzUuMDIgMjEuOTIgNzkuNDMgNDguMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzUuMjQgMjEuOTIgNDUuNjcgMzguNjYgNDMuMzEgMzUuMzYgNTUuMDYgNC4zOSA3NS4yNCAyMS45MiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI1NC41NSA0LjY5IDQyLjg2IDM2LjU5IDM4LjkyIDM1LjYgMjcuODMgNC4zOSA1NC41NSA0LjY5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 10:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnNDYxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTUgMTcuMTQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZjk0YTE1O308L3N0eWxlPjwvZGVmcz48dGl0bGU+YmlrZXNoYXJlX291dF9vZl9odWI8L3RpdGxlPjxwYXRoIGlkPSJjaXJjbGU0NjA0IiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMS42OSwxLjM4YTEsMSwwLDEsMCwxLDFBMSwxLDAsMCwwLDExLjY5LDEuMzhabS0xLjg2LDJhMC41LDAuNSwwLDAsMC0uMzUuMTRMNi44NCw2YTAuNSwwLjUsMCwwLDAsMCwuNzZsMS44LDEuMzV2Mi43NWEwLjUsMC41LDAsMSwwLDEsMHYtM2EwLjUsMC41LDAsMCwwLS4yLTAuNEw4LjcyLDYuOWwxLjgyLTEuNzIsMC43NSwxYTAuNSwwLjUsMCwwLDAsLjQuMmgxLjVhMC41LDAuNSwwLDEsMCwwLTFIMTEuOTRsLTAuNzUtMS0wLjYtLjhhMC41LDAuNSwwLDAsMC0uMzgtMC4yMUg5LjgzWm0tNS4xNCw0YTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDQuNjksNy4zOFptOSwwYTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDEzLjY5LDcuMzhabS05LDFhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsNC42OSw4LjM4Wm05LDBhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsMTMuNjksOC4zOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjY5IC0xLjM4KSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIzLjMgMTIuOTQgNy41IDE3LjE0IDExLjcgMTIuOTQgMy4zIDEyLjk0Ii8+PC9zdmc+\");';\n default:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n }\n};\n/*\n Bike rental icons are different from other vehicle rental types since they\n * typically have stations in addition to free-floating bikes. The stations are\n * drawn as svgs marking how full the stations are while the floating bikes have\n * their own unique icon.\n */\nexport const BaseBikeRentalIcon = styled.div<{ percent: number }>`\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n margin: auto;\n width: 24px;\n height: 24px;\n ${props => getPctIcon(props.percent)}\n`;\n\nexport const StationMarker = styled(MapMarkerAlt)`\n height: 12;\n width: 12;\n color: ${props => props.color};\n`;\n"],"file":"styled.js"}
1	+ {"version":3,"sources":["../src/styled.ts"],"names":["getPctIcon","percent","Math","floor","BaseBikeRentalIcon","styled","div","props","StationMarker","MapMarkerAlt","color"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,MAAMA,UAAU,GAAIC,OAAD,IAAqB;AACtC,UAAQC,IAAI,CAACC,KAAL,CAAWF,OAAO,GAAG,EAArB,CAAR;AACE,SAAK,CAAL;AACE,aAAO,kjDAAP;;AACF,SAAK,CAAL;AACE,aAAO,0sDAAP;;AACF,SAAK,CAAL;AACE,aAAO,i0DAAP;;AACF,SAAK,CAAL;AACE,aAAO,07DAAP;;AACF,SAAK,CAAL;AACE,aAAO,kjEAAP;;AACF,SAAK,CAAL;AACE,aAAO,sqEAAP;;AACF,SAAK,CAAL;AACE,aAAO,kyEAAP;;AACF,SAAK,CAAL;AACE,aAAO,85EAAP;;AACF,SAAK,CAAL;AACE,aAAO,khFAAP;;AACF,SAAK,CAAL;AACE,aAAO,8oFAAP;;AACF,SAAK,EAAL;AACE,aAAO,siCAAP;;AACF;AACE,aAAO,kjDAAP;AAxBJ;AA0BD,CA3BD;AA4BA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+HAO3BC,KAAK,IAAIP,UAAU,CAACO,KAAK,CAACN,OAAP,CAPQ,CAAxB;;;AAUA,MAAMO,aAAa,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,uCACfF,KAAK,IAAIA,KAAK,CAACG,KADA,CAAnB","sourcesContent":["import styled from \"styled-components\";\nimport { MapMarkerAlt } from \"@styled-icons/fa-solid/MapMarkerAlt\";\n\nconst getPctIcon = (percent: number) => {\n switch (Math.floor(percent * 10)) {\n case 0:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n case 1:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 2:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\")';\n case 3:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 4:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 5:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjU0LjU1IDQuNjkgNDIuODYgMzYuNTkgMzguOTIgMzUuNiAyNy44MyA0LjM5IDU0LjU1IDQuNjkiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNDEuMSA4MC4wNyA0MS4xNSA0Ni4wOSAzNy4xMSA0NS42NSAxNS45MiA3MS4xMSA0MS4xIDgwLjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjE1Ljk2IDcwLjc4IDM3LjkxIDQ0Ljg1IDM1LjExIDQxLjkxIDIuNDkgNDcuNjkgMTUuOTYgNzAuNzgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMi45MiA0OC4wNyAzNi4zOCA0Mi4xNyAzNi4xIDM4LjEyIDcuMzMgMjEuNyAyLjkyIDQ4LjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjcuMTEgMjEuNzEgMzYuNjggMzguNDUgMzkuMDQgMzUuMTUgMjcuMjkgNC4xOCA3LjExIDIxLjcxIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n case 6:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 7:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 8:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItODwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjY2LjM5IDcxIDQ0LjQ0IDQ1LjA2IDQ3LjI0IDQyLjEzIDc5Ljg2IDQ3LjkxIDY2LjM5IDcxIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=\");';\n case 9:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItOTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjI1IDgwLjI4IDQxLjIgNDYuMzEgNDUuMjQgNDUuODcgNjYuNDMgNzEuMzIgNDEuMjUgODAuMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNjYuMzkgNzEgNDQuNDQgNDUuMDYgNDcuMjQgNDIuMTMgNzkuODYgNDcuOTEgNjYuMzkgNzEiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzkuNDMgNDguMjggNDUuOTcgNDIuMzggNDYuMjUgMzguMzMgNzUuMDIgMjEuOTIgNzkuNDMgNDguMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzUuMjQgMjEuOTIgNDUuNjcgMzguNjYgNDMuMzEgMzUuMzYgNTUuMDYgNC4zOSA3NS4yNCAyMS45MiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI1NC41NSA0LjY5IDQyLjg2IDM2LjU5IDM4LjkyIDM1LjYgMjcuODMgNC4zOSA1NC41NSA0LjY5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==\");';\n case 10:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnNDYxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTUgMTcuMTQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZjk0YTE1O308L3N0eWxlPjwvZGVmcz48dGl0bGU+YmlrZXNoYXJlX291dF9vZl9odWI8L3RpdGxlPjxwYXRoIGlkPSJjaXJjbGU0NjA0IiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMS42OSwxLjM4YTEsMSwwLDEsMCwxLDFBMSwxLDAsMCwwLDExLjY5LDEuMzhabS0xLjg2LDJhMC41LDAuNSwwLDAsMC0uMzUuMTRMNi44NCw2YTAuNSwwLjUsMCwwLDAsMCwuNzZsMS44LDEuMzV2Mi43NWEwLjUsMC41LDAsMSwwLDEsMHYtM2EwLjUsMC41LDAsMCwwLS4yLTAuNEw4LjcyLDYuOWwxLjgyLTEuNzIsMC43NSwxYTAuNSwwLjUsMCwwLDAsLjQuMmgxLjVhMC41LDAuNSwwLDEsMCwwLTFIMTEuOTRsLTAuNzUtMS0wLjYtLjhhMC41LDAuNSwwLDAsMC0uMzgtMC4yMUg5LjgzWm0tNS4xNCw0YTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDQuNjksNy4zOFptOSwwYTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDEzLjY5LDcuMzhabS05LDFhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsNC42OSw4LjM4Wm05LDBhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsMTMuNjksOC4zOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjY5IC0xLjM4KSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIzLjMgMTIuOTQgNy41IDE3LjE0IDExLjcgMTIuOTQgMy4zIDEyLjk0Ii8+PC9zdmc+\");';\n default:\n return 'background-image: url(\"data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+\");';\n }\n};\n/*\n Bike rental icons are different from other vehicle rental types since they\n * typically have stations in addition to free-floating bikes. The stations are\n * drawn as svgs marking how full the stations are while the floating bikes have\n * their own unique icon.\n */\nexport const BaseBikeRentalIcon = styled.div<{ percent: number }>`\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n height: 24px;\n margin: auto;\n width: 24px;\n ${props => getPctIcon(props.percent)}\n`;\n\nexport const StationMarker = styled(MapMarkerAlt)`\n color: ${props => props.color};\n height: 12;\n width: 12;\n`;\n"],"file":"styled.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/vehicle-rental-overlay",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.1",
   "description": "A map overlay to show vehicle rentals from a specific company",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -19,21 +19,21 @@
     "url": "git+https://github.com/opentripplanner/otp-ui.git"
   },
   "dependencies": {
-    "@opentripplanner/core-utils": "^4.5.0",
-    "react-map-gl": "^7.0.15",
+    "@opentripplanner/base-map": "^3.0.0",
+    "@opentripplanner/core-utils": "^7.0.1",
     "@opentripplanner/from-to-location-picker": "^2.1.2",
     "@styled-icons/fa-solid": "^10.34.0",
     "flat": "^5.0.2",
     "lodash.memoize": "^4.1.2"
   },
   "devDependencies": {
-    "@opentripplanner/types": "^2.0.0"
+    "@opentripplanner/types": "^4.0.0"
   },
   "peerDependencies": {
-    "@opentripplanner/base-map": "^2.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.8.6",
     "react-intl": "^5.24.6",
+    "react-map-gl": "^7.0.15",
     "styled-components": "^5.3.0"
   }
 }

package/src/StationPopup.tsx CHANGED Viewed

@@ -1,15 +1,15 @@
+import { Styled as BaseMapStyled } from "@opentripplanner/base-map";
+import coreUtils from "@opentripplanner/core-utils";
+import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
 import {
   Company,
   ConfiguredCompany,
   MapLocationActionArg,
   Station
 } from "@opentripplanner/types";
-import { Styled as BaseMapStyled } from "@opentripplanner/base-map";
-import React from "react";
-import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
-import coreUtils from "@opentripplanner/core-utils";
-import { IntlShape, useIntl, FormattedMessage } from "react-intl";
 import flatten from "flat";
+import { FormattedMessage, IntlShape, useIntl } from "react-intl";
+import React from "react";
 // Load the default messages.
 // @ts-expect-error why is this failing?
@@ -79,10 +79,10 @@ function makeDefaultGetStationName(intl: IntlShape) {
 }
 type Props = {
-  station: Station;
   configCompanies: ConfiguredCompany[];
   getStationName: (configCompanies: Company[], station: Station) => string;
   setLocation: (arg: MapLocationActionArg) => void;
+  station: Station;
 };
 /**
  * Render some popup html for a station. This contains custom logic for

package/src/VehicleRentalOverlay.story.tsx CHANGED Viewed

@@ -1,13 +1,13 @@
-import BaseMap from "@opentripplanner/base-map";
 import React from "react";
 import { action } from "@storybook/addon-actions";
 import { boolean } from "@storybook/addon-knobs";
 import { Company, Station } from "@opentripplanner/types";
-import VehicleRentalOverlay from ".";
 import bikeRentalStations from "../__mocks__/bike-rental-stations.json";
 import carRentalStations from "../__mocks__/car-rental-stations.json";
 import eScooterStations from "../__mocks__/e-scooter-rental-stations.json";
+import { withMap } from "../../../.storybook/base-map-wrapper";
+import VehicleRentalOverlay from ".";
 const center: [number, number] = [45.518092, -122.671202];
 const configCompanies = [
@@ -51,19 +51,16 @@ const ZoomControlledMapWithVehicleRentalOverlay = ({
   stations,
   visible
 }: StoryProps) => (
-  // Caution, <BaseMap> must be a direct parent of <VehicleRentalOverlay>.
-  // Therefore, do not place <BaseMap> in a decorator at this time.
-  <BaseMap center={center} forceMaxHeight zoom={INITIAL_ZOOM}>
-    <VehicleRentalOverlay
-      configCompanies={configCompanies}
-      companies={companies}
-      getStationName={getStationName}
-      setLocation={setLocation}
-      refreshVehicles={refreshVehicles}
-      stations={stations}
-      visible={visible}
-    />
-  </BaseMap>
+  <VehicleRentalOverlay
+    companies={companies}
+    configCompanies={configCompanies}
+    getStationName={getStationName}
+    id="test"
+    refreshVehicles={refreshVehicles}
+    setLocation={setLocation}
+    stations={stations}
+    visible={visible}
+  />
 );
 function customStationName(_, station) {
@@ -72,7 +69,8 @@ function customStationName(_, station) {
 export default {
   title: "VehicleRentalOverlay",
-  component: VehicleRentalOverlay
+  component: VehicleRentalOverlay,
+  decorators: [withMap(center, INITIAL_ZOOM)]
 };
 export const RentalBicycles = () => (