@nasa-terra/components 0.0.43 → 0.0.44

package/{dist/chunks/chunk.5SCGJTRA.js → cdn/chunks/chunk.GCAMRTXJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraDialog
-} from "./chunk.FAYNPOTP.js";
+} from "./chunk.USSYORDO.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = TerraDialog;

package/cdn/chunks/{chunk.RBDPBQSI.js → chunk.GL6JG3XV.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.7HEVEWEJ.js";
+} from "./chunk.G3KUAHGF.js";
 
 // src/components/browse-variables/browse-variables.ts
 var browse_variables_default = TerraBrowseVariables;

package/cdn/chunks/{chunk.WI5HA4EV.js → chunk.GYLB33OZ.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   n,
   r

package/{dist/chunks/chunk.4CGQC6VG.js → cdn/chunks/chunk.GZHR4GPY.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.NDYEIMNI.js";
+} from "./chunk.WMCV5DKE.js";
 
 // src/react/variable-combobox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.IAPB27AW.js → chunk.H23L4QKO.js}

@@ -1,18 +1,18 @@
+import {
+  map_styles_default
+} from "./chunk.TZK42POE.js";
 import {
   leaflet_draw_styles_default
-} from "./chunk.KJ4BZBTX.js";
+} from "./chunk.27EMK3NO.js";
 import {
   Leaflet
-} from "./chunk.MUAWDIKB.js";
+} from "./chunk.6NEMJOXS.js";
 import {
   leaflet_styles_default
 } from "./chunk.VHHIJXG2.js";
 import {
   MapController
 } from "./chunk.M4BZHL67.js";
-import {
-  map_styles_default
-} from "./chunk.TZK42POE.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
@@ -25,7 +25,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   e,
   n,

package/cdn/chunks/{chunk.5TCPFCD2.js → chunk.HD45UIMB.js}

@@ -1,22 +1,22 @@
-import {
-  isValidDate
-} from "./chunk.46IWBVYP.js";
 import {
   format
-} from "./chunk.BPNFS4ED.js";
+} from "./chunk.K6GAF43H.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.WTMN7OUL.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
 import {
-  date_range_slider_styles_default
-} from "./chunk.WTMN7OUL.js";
+  isValidDate
+} from "./chunk.YIABHSHN.js";
 import {
   watch
 } from "./chunk.6MMTW476.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   e,
   n

package/{dist/chunks/chunk.N2FQ2MRM.js → cdn/chunks/chunk.HWTTKAUR.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.4TEZ5QPN.js";
+} from "./chunk.TIU73DG7.js";
 
 // src/react/time-series/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.ANZFZPPU.js → chunk.IL7RNVV6.js}

@@ -1,10 +1,14 @@
 import {
   format
-} from "./chunk.BPNFS4ED.js";
+} from "./chunk.K6GAF43H.js";
 import {
   h,
   i
 } from "./chunk.UGTZ22DI.js";
+import {
+  formatDate,
+  getUTCDate
+} from "./chunk.YIABHSHN.js";
 import {
   __asyncGenerator,
   __await,
@@ -340,6 +344,7 @@ function storeDataByKey(store, key, data) {
 }
 
 // src/components/time-series/time-series.controller.ts
+var NUM_DATAPOINTS_TO_WARN_USER = 5e4;
 var endpoint = "https://8weebb031a.execute-api.us-east-1.amazonaws.com/SIT/timeseries-no-user";
 var plotlyDefaultData = {
   // holds the default Plotly configuration options.
@@ -349,7 +354,7 @@ var plotlyDefaultData = {
   line: { color: "rgb(28, 103, 227)" }
   // TODO: configureable?
 };
-var _bearerToken, _loadTimeSeries, loadTimeSeries_fn, _calculateDataGaps, calculateDataGaps_fn, _fetchTimeSeriesChunk, fetchTimeSeriesChunk_fn, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn, _getDataInRange, getDataInRange_fn;
+var _bearerToken, _userConfirmedWarning, _loadTimeSeries, loadTimeSeries_fn, _calculateDataGaps, calculateDataGaps_fn, _fetchTimeSeriesChunk, fetchTimeSeriesChunk_fn, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn, _getDataInRange, getDataInRange_fn, _normalizeCoordinates, normalizeCoordinates_fn, _checkDataPointLimits, checkDataPointLimits_fn;
 var TimeSeriesController = class {
   constructor(host, bearerToken) {
     __privateAdd(this, _loadTimeSeries);
@@ -370,7 +375,17 @@ var TimeSeriesController = class {
      * given a set of data and a date range, will return only the data that falls within that range
      */
     __privateAdd(this, _getDataInRange);
+    /**
+     * Normalizes coordinates to 2 decimal places
+     */
+    __privateAdd(this, _normalizeCoordinates);
+    /**
+     * Checks if the current date range will exceed data point limits
+     * Returns true if it's safe to proceed, false if confirmation is needed
+     */
+    __privateAdd(this, _checkDataPointLimits);
     __privateAdd(this, _bearerToken, null);
+    __privateAdd(this, _userConfirmedWarning, false);
     this.emptyPlotData = [
       __spreadProps(__spreadValues({}, plotlyDefaultData), {
         x: [],
@@ -380,10 +395,9 @@ var TimeSeriesController = class {
     __privateSet(this, _bearerToken, bearerToken);
     this.host = host;
     this.task = new h(host, {
-      autoRun: false,
       // passing the signal in so the fetch request will be aborted when the task is aborted
       task: async (_args, { signal }) => {
-        if (!this.collection || !this.variable || !this.startDate || !this.endDate || !this.location) {
+        if (!this.host.catalogVariable || !this.host.startDate || !this.host.endDate || !this.host.location) {
           return i;
         }
         const timeSeries = await __privateMethod(this, _loadTimeSeries, loadTimeSeries_fn).call(this, signal);
@@ -396,34 +410,49 @@ var TimeSeriesController = class {
         this.host.emit("terra-time-series-data-change", {
           detail: {
             data: timeSeries,
-            collection: this.collection,
-            variable: this.variable,
-            startDate: this.startDate.toISOString(),
-            endDate: this.endDate.toISOString(),
-            location: this.location
+            variable: this.host.catalogVariable,
+            startDate: formatDate(this.host.startDate),
+            endDate: formatDate(this.host.endDate),
+            location: this.host.location
           }
         });
         return this.lastTaskValue;
-      }
+      },
+      args: () => [
+        this.host.catalogVariable,
+        this.host.startDate,
+        this.host.endDate,
+        this.host.location
+      ]
     });
   }
   render(renderFunctions) {
     return this.task.render(renderFunctions);
   }
+  /**
+   * Called when the user confirms the data point warning
+   */
+  confirmDataPointWarning() {
+    __privateSet(this, _userConfirmedWarning, true);
+    this.host.showDataPointWarning = false;
+  }
 };
 _bearerToken = new WeakMap();
+_userConfirmedWarning = new WeakMap();
 _loadTimeSeries = new WeakSet();
 loadTimeSeries_fn = async function(signal) {
-  const variableEntryId = `${this.collection}_${this.variable}`.replace(
-    /\./g,
-    "_"
-  );
-  const cacheKey = `${variableEntryId}_${this.location}`;
+  const [lat, lon] = this.host.location.split(",");
+  const normalizedLocation = __privateMethod(this, _normalizeCoordinates, normalizeCoordinates_fn).call(this, lat, lon);
+  const location = `${normalizedLocation.lat},%20${normalizedLocation.lon}`;
+  const startDate = getUTCDate(this.host.startDate);
+  const endDate = getUTCDate(this.host.endDate);
+  const variableEntryId = this.host.catalogVariable.dataFieldId;
+  const cacheKey = `${variableEntryId}_${location}`;
   const existingTerraData = await getDataByKey(
     "time-series" /* TIME_SERIES */,
     cacheKey
   );
-  if (existingTerraData && this.startDate.getTime() >= new Date(existingTerraData.startDate).getTime() && this.endDate.getTime() <= new Date(existingTerraData.endDate).getTime()) {
+  if (existingTerraData && startDate.getTime() >= new Date(existingTerraData.startDate).getTime() && endDate.getTime() <= new Date(existingTerraData.endDate).getTime()) {
     return __privateMethod(this, _getDataInRange, getDataInRange_fn).call(this, existingTerraData);
   }
   const dataGaps = __privateMethod(this, _calculateDataGaps, calculateDataGaps_fn).call(this, existingTerraData);
@@ -433,7 +462,7 @@ loadTimeSeries_fn = async function(signal) {
   const allChunks = [];
   for (const gap of dataGaps) {
     const chunks = calculateDateChunks(
-      this.host.timeInterval,
+      this.host.catalogVariable.dataProductTimeInterval,
       gap.start,
       gap.end
     );
@@ -479,28 +508,35 @@ loadTimeSeries_fn = async function(signal) {
 };
 _calculateDataGaps = new WeakSet();
 calculateDataGaps_fn = function(existingData) {
+  const start = getUTCDate(this.host.startDate);
+  const end = getUTCDate(this.host.endDate);
   if (!existingData) {
-    return [{ start: this.startDate, end: this.endDate }];
+    return [{ start, end }];
   }
   const existingStartDate = new Date(existingData.startDate);
   const existingEndDate = new Date(existingData.endDate);
   const gaps = [];
-  if (this.startDate < existingStartDate) {
-    gaps.push({ start: this.startDate, end: existingStartDate });
+  if (start < existingStartDate) {
+    gaps.push({ start, end: existingStartDate });
   }
-  if (this.endDate > existingEndDate) {
-    gaps.push({ start: existingEndDate, end: this.endDate });
+  if (end > existingEndDate) {
+    gaps.push({ start: existingEndDate, end });
   }
   return gaps;
 };
 _fetchTimeSeriesChunk = new WeakSet();
 fetchTimeSeriesChunk_fn = async function(variableEntryId, startDate, endDate, signal) {
   var _a;
-  const [lon, lat] = decodeURIComponent((_a = this.location) != null ? _a : ", ").split(", ");
+  if (!__privateGet(this, _userConfirmedWarning) && !__privateMethod(this, _checkDataPointLimits, checkDataPointLimits_fn).call(this, this.host.catalogVariable, startDate, endDate)) {
+    throw new Error("User cancelled data point warning");
+  }
+  __privateSet(this, _userConfirmedWarning, false);
+  const [lat, lon] = decodeURIComponent((_a = this.host.location) != null ? _a : ",").split(",");
+  const normalizedLocation = __privateMethod(this, _normalizeCoordinates, normalizeCoordinates_fn).call(this, lat, lon);
   const url = `${endpoint}?${new URLSearchParams({
     data: variableEntryId,
-    lat,
-    lon,
+    lat: normalizedLocation.lat,
+    lon: normalizedLocation.lon,
     time_start: format(startDate, "yyyy-MM-dd") + "T00%3A00%3A00",
     time_end: format(endDate, "yyyy-MM-dd") + "T23%3A59%3A59"
   }).toString()}`;
@@ -554,18 +590,39 @@ parseTimeSeriesCsv_fn = function(text) {
 };
 _getDataInRange = new WeakSet();
 getDataInRange_fn = function(data) {
+  const startDate = getUTCDate(this.host.startDate);
+  const endDate = getUTCDate(this.host.endDate);
   return __spreadProps(__spreadValues({}, data), {
     data: data.data.filter((row) => {
       const timestamp = new Date(row.timestamp);
-      return timestamp >= this.startDate && timestamp <= this.endDate;
+      return timestamp >= startDate && timestamp <= endDate;
     }).sort(
       (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
     )
   });
 };
+_normalizeCoordinates = new WeakSet();
+normalizeCoordinates_fn = function(lat, lon) {
+  return {
+    lat: Number(lat).toFixed(2),
+    lon: Number(lon).toFixed(2)
+  };
+};
+_checkDataPointLimits = new WeakSet();
+checkDataPointLimits_fn = function(catalogVariable, startDate, endDate) {
+  this.host.estimatedDataPoints = calculateDataPoints(
+    catalogVariable.dataProductTimeInterval,
+    startDate,
+    endDate
+  );
+  if (this.host.estimatedDataPoints < NUM_DATAPOINTS_TO_WARN_USER) {
+    return true;
+  }
+  this.host.showDataPointWarning = true;
+  return false;
+};
 
 export {
-  calculateDataPoints,
   plotlyDefaultData,
   TimeSeriesController
 };

package/{dist/chunks/chunk.H7YVB7XB.js → cdn/chunks/chunk.JACHBLN5.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.QM5FOCP6.js";
+} from "./chunk.EWAYMWRC.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/{dist/chunks/chunk.T6R6HWM7.js → cdn/chunks/chunk.JQETEJPO.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.X4377OEL.js";
+} from "./chunk.H23L4QKO.js";
 
 // src/components/map/map.ts
 var map_default = TerraMap;

package/cdn/chunks/{chunk.TY7DVGTP.js → chunk.K23IQJ74.js}

@@ -1,11 +1,11 @@
+import {
+  icon_styles_default
+} from "./chunk.4XR5KYKG.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.7DOMZGX7.js";
-import {
-  icon_styles_default
-} from "./chunk.4XR5KYKG.js";
+} from "./chunk.MDRUDBRH.js";
 import {
   e
 } from "./chunk.6NYH4BZ2.js";
@@ -15,7 +15,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.BPNFS4ED.js → chunk.K6GAF43H.js}

@@ -1,7 +1,7 @@
 import {
   isValid,
   toDate
-} from "./chunk.FRHQ2JZY.js";
+} from "./chunk.YIABHSHN.js";
 
 // node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs
 var formatDistanceLocale = {

package/cdn/chunks/{chunk.JZBUILMZ.js → chunk.KIR56MAA.js}

@@ -3,15 +3,15 @@ import {
 } from "./chunk.POKHGMEN.js";
 import {
   TerraMap
-} from "./chunk.IAPB27AW.js";
+} from "./chunk.H23L4QKO.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
-} from "./chunk.MUAWDIKB.js";
+} from "./chunk.6NEMJOXS.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   e,
   n,
@@ -38,19 +38,56 @@ var TerraSpatialPicker = class extends TerraElement {
     this.initialValue = "";
     this.hideLabel = false;
     this.label = "Select Region";
+    this.spatialConstraints = "-180, -90, 180, 90";
     this.isExpanded = false;
     this.inline = false;
+    this.showMapOnFocus = false;
   }
   _blur(e2) {
     const inputValue = e2.target.value;
-    this.mapValue = inputValue === "" ? [] : parseBoundingBox(inputValue);
+    if (inputValue === "") {
+      this.mapValue = [];
+    } else {
+      const parsedValue = parseBoundingBox(inputValue);
+      if (Array.isArray(parsedValue)) {
+        this.mapValue = parsedValue.map((coordArray) => {
+          return coordArray.map(
+            (coord) => parseFloat(coord.toFixed(2))
+          );
+        });
+      } else if (parsedValue && typeof parsedValue === "object" && "lat" in parsedValue && "lng" in parsedValue) {
+        const { lat, lng } = parsedValue;
+        this.mapValue = {
+          lat: parseFloat(lat.toFixed(2)),
+          lng: parseFloat(lng.toFixed(2))
+        };
+      } else {
+        this.mapValue = [];
+      }
+    }
     const relatedTarget = e2.relatedTarget;
     if (!(relatedTarget == null ? void 0 : relatedTarget.closest("terra-map"))) {
       this.isExpanded = false;
     }
+    this.emit("terra-map-change", {
+      detail: {
+        cause: "draw",
+        latLng: this.mapValue,
+        geoJson: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [this.mapValue.lng, this.mapValue.lat]
+          },
+          properties: {}
+        }
+      }
+    });
   }
   _focus() {
-    this.isExpanded = true;
+    if (this.showMapOnFocus) {
+      this.isExpanded = true;
+    }
   }
   _click() {
     this.isExpanded = !this.isExpanded;
@@ -65,6 +102,7 @@ var TerraSpatialPicker = class extends TerraElement {
     switch (event.detail.cause) {
       case "clear":
         this.spatialInput.value = "";
+        this.spatialConstraints = "-180, -90, 180, 90";
         break;
       case "draw":
         if (event.detail.bounds) {
@@ -115,7 +153,7 @@ var TerraSpatialPicker = class extends TerraElement {
                         value=${this.initialValue}
                         type="text"
                         class="spatial-picker__input form-control"
-                        placeholder="-180, -90, 180, 90"
+                        placeholder="${this.spatialConstraints}"
                         aria-controls="map"
                         aria-expanded=${this.isExpanded}
                         @blur=${this._blur}
@@ -179,12 +217,18 @@ __decorateClass([
 __decorateClass([
   n()
 ], TerraSpatialPicker.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "spatial-constraints" })
+], TerraSpatialPicker.prototype, "spatialConstraints", 2);
 __decorateClass([
   n({ attribute: "is-expanded", type: Boolean, reflect: true })
 ], TerraSpatialPicker.prototype, "isExpanded", 2);
 __decorateClass([
   n({ type: Boolean })
 ], TerraSpatialPicker.prototype, "inline", 2);
+__decorateClass([
+  n({ attribute: "show-map-on-focus", type: Boolean })
+], TerraSpatialPicker.prototype, "showMapOnFocus", 2);
 __decorateClass([
   r()
 ], TerraSpatialPicker.prototype, "mapValue", 2);

package/cdn/chunks/{chunk.NL52F475.js → chunk.KK22KVB3.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   e,
   n

package/cdn/chunks/{chunk.QUT2NHTH.js → chunk.KTWUFC2X.js}

@@ -1,6 +1,6 @@
 import {
   TerraDatePicker
-} from "./chunk.NL52F475.js";
+} from "./chunk.KK22KVB3.js";
 
 // src/react/date-picker/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.FROJF7FV.js → chunk.KXV2VFRZ.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.7PAVW6KC.js";
 import {
   skeleton_default
-} from "./chunk.LOCO37M5.js";
+} from "./chunk.X2C7E56W.js";
 import {
   skeleton_styles_default
 } from "./chunk.FPSSRS2U.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   n
 } from "./chunk.2FFSUM6T.js";

package/cdn/chunks/{chunk.XGH62P7U.js → chunk.LIQO4PBF.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.3JPFQJXJ.js";
+} from "./chunk.EDHE5LYN.js";
 
 // src/react/login/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.AFI6EDPJ.js → cdn/chunks/chunk.LJJH36WV.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.7P5EOY66.js";
+} from "./chunk.6UN7FSXA.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.4T3FDB6X.js → chunk.MV5I3VKS.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.IAPB27AW.js";
+} from "./chunk.H23L4QKO.js";
 
 // src/react/map/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.E6NS2XK6.js → chunk.OEZDKHKJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.TY7DVGTP.js";
+} from "./chunk.K23IQJ74.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.XJVNZTEE.js → chunk.OW6RZGKY.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.FBCYHMRV.js";
+} from "./chunk.6UN7FSXA.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/cdn/chunks/{chunk.GGDBLPBD.js → chunk.PKYRPEMV.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.OGI7F4SN.js";
+} from "./chunk.CN4PWRCO.js";
 import {
   n
 } from "./chunk.2FFSUM6T.js";

package/{dist/chunks/chunk.WSTFOCG3.js → cdn/chunks/chunk.QRIUCU7O.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.TCMWMNOB.js";
+} from "./chunk.K23IQJ74.js";
 
 // src/components/icon/icon.ts
 var icon_default = TerraIcon;

package/{dist/chunks/chunk.YS5RGF3Z.js → cdn/chunks/chunk.QY4XLR3T.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.OFKYTBNH.js";
+} from "./chunk.6EHGJWBN.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.HNZE7Q25.js → chunk.RMO3MGXB.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.7HEVEWEJ.js";
+} from "./chunk.G3KUAHGF.js";
 
 // src/react/browse-variables/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.D2R6EOTB.js → chunk.SRPUN5BY.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.GGDBLPBD.js";
+} from "./chunk.PKYRPEMV.js";
 
 // src/components/chip/chip.ts
 var chip_default = TerraChip;

package/{dist/chunks/chunk.QIA6DTTP.js → cdn/chunks/chunk.SUGFD7E6.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.ZLAVT4EU.js";
+} from "./chunk.5BHGM65J.js";
 
 // src/react/variable-keyword-search/index.ts
 import * as React from "react";