@esri/solutions-components 0.8.2 → 0.8.4

package/dist/cjs/{utils-ea7a5a63.js → utils-ac836e7a.js}

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const locale = require('./locale-3e33f44c.js');
+const locale = require('./locale-4cef466e.js');
 const index = require('./index-ae65e42f.js');
 
 exports.EInputType = void 0;

package/dist/collection/utils/downloadUtils.js

@@ -37,7 +37,11 @@ import { queryRelated } from "@esri/arcgis-rest-feature-layer";
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
+ * @param isCSVExport Indicates if the export is for a CSV file
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns selectionSetNames that will be used for export filenames
  */
 export async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -63,6 +67,9 @@ export async function consolidateLabels(webmap, exportInfos, formatUsingLayerPop
  * all attributes are exported
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
  * @param addColumnTitle Indicates if column headings should be included in output
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns Promise resolving when function is done
  */
 export async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -304,6 +311,30 @@ export function _createFilename(selectionSetNames) {
     const title = selectionSetNames.length > 0 ? selectionSetNames.join(", ") : "download";
     return title;
 }
+/**
+ * Creates headings from a label format.
+ *
+ * @param labelFormat Format for label
+ * @returns A list of headings, with one heading for each line in the label format
+ */
+export function _extractHeaderNames(labelFormat) {
+    // Split the format into lines
+    const lines = labelFormat.split(lineSeparatorChar);
+    // Generate a header for each line
+    const headerNames = lines.map((line, i) => {
+        // Find the field names in the line
+        const fieldNameSyms = line.match(/\{[^\}]*\}/g);
+        // Extract the field names from the symbols; if there are no symbols, use a default name; if a field name
+        // is an Arcade expression, extract the expression name
+        return fieldNameSyms
+            ? fieldNameSyms
+                .map(fieldName => fieldName.substring(1, fieldName.length - 1))
+                .map(fieldName => fieldName.startsWith("expression/") ? fieldName.substring(fieldName.indexOf("/") + 1) : fieldName)
+                .join("__")
+            : `column_${i + 1}`;
+    });
+    return headerNames;
+}
 /**
  * Extracts Arcade expression references from the lines of a label format.
  *
@@ -437,7 +468,7 @@ export async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
                 webmapLayers = webmapLayers.filter((webmapLayer) => webmapLayer.type === "feature" && webmapLayer.layerId === layerRelationship.relatedTableId);
                 if (webmapLayers.length > 0) {
                     labelFormatProps = await _getLabelFormat(webmap, webmapLayers[0], formatUsingLayerPopup);
-                    labelFormatProps.relationshipId = relationshipId;
+                    labelFormatProps.relationshipId = relationshipId.toString();
                 }
                 else {
                     // Related layer info is not in webmap; get the label info from the related layer
@@ -475,7 +506,7 @@ export async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
                     }
                     else {
                         labelFormatProps = await labelFormatPropsPromise;
-                        labelFormatProps.relationshipId = relationshipId;
+                        labelFormatProps.relationshipId = relationshipId.toString();
                     }
                 }
             }
@@ -602,7 +633,7 @@ export function _prepareAttributeValue(attributeValue, attributeType, attributeD
  * @param ids List of ids to download
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving when function is done
  */
 export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -707,7 +738,7 @@ export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup =
  * @param featureSet Features to convert to labels
  * @param attributeTypes Type for each attribute in a feature
  * @param attributeDomains Domains for each attribute in a feature
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 export async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomains, includeHeaderNames = false, useFieldAliasNames = false) {
@@ -744,7 +775,7 @@ export async function _prepareLabelsFromAll(featureSet, attributeTypes, attribut
  * @param attributeDomains Domains for each attribute in a feature
  * @param attributeFormats Formats for each attribute in a feature
  * @param labelFormat Format for label
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 export async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
@@ -784,7 +815,7 @@ export async function _prepareLabelsFromPattern(layer, featureSet, attributeOrig
     }));
     // Add header names
     if (includeHeaderNames) {
-        labels.unshift(attributeNames);
+        labels.unshift(_extractHeaderNames(labelFormat));
     }
     return Promise.resolve(labels);
 }

package/dist/collection/utils/downloadUtils.ts

@@ -117,7 +117,11 @@ import {
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
+ * @param isCSVExport Indicates if the export is for a CSV file
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns selectionSetNames that will be used for export filenames
  */
 export async function consolidateLabels(
@@ -156,6 +160,9 @@ export async function consolidateLabels(
  * all attributes are exported
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
  * @param addColumnTitle Indicates if column headings should be included in output
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns Promise resolving when function is done
  */
 export async function downloadCSV(
@@ -472,6 +479,38 @@ export function _createFilename(
   return title;
 }
 
+/**
+ * Creates headings from a label format.
+ *
+ * @param labelFormat Format for label
+ * @returns A list of headings, with one heading for each line in the label format
+ */
+export function _extractHeaderNames(
+  labelFormat: string
+): string[] {
+  // Split the format into lines
+  const lines = labelFormat.split(lineSeparatorChar);
+
+  // Generate a header for each line
+  const headerNames = lines.map(
+    (line, i) => {
+      // Find the field names in the line
+      const fieldNameSyms = line.match(/\{[^\}]*\}/g);
+
+      // Extract the field names from the symbols; if there are no symbols, use a default name; if a field name
+      // is an Arcade expression, extract the expression name
+      return fieldNameSyms
+        ? fieldNameSyms
+          .map(fieldName => fieldName.substring(1, fieldName.length - 1))
+          .map(fieldName => fieldName.startsWith("expression/") ? fieldName.substring(fieldName.indexOf("/") + 1) : fieldName)
+          .join("__")
+        : `column_${i + 1}`;
+    }
+  );
+
+  return headerNames;
+}
+
 /**
  * Extracts Arcade expression references from the lines of a label format.
  *
@@ -647,7 +686,7 @@ export async function _getLabelFormat(
 
         if (webmapLayers.length > 0) {
           labelFormatProps = await _getLabelFormat(webmap, webmapLayers[0], formatUsingLayerPopup);
-          labelFormatProps.relationshipId = relationshipId;
+          labelFormatProps.relationshipId = relationshipId.toString();
 
         } else {
           // Related layer info is not in webmap; get the label info from the related layer
@@ -694,7 +733,7 @@ export async function _getLabelFormat(
             labelFormatProps.labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos);
           } else {
             labelFormatProps = await labelFormatPropsPromise;
-            labelFormatProps.relationshipId = relationshipId;
+            labelFormatProps.relationshipId = relationshipId.toString();
           }
         }
 
@@ -836,7 +875,7 @@ export function _prepareAttributeValue(
  * @param ids List of ids to download
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving when function is done
  */
 export async function _prepareLabels(
@@ -973,7 +1012,7 @@ export async function _prepareLabels(
  * @param featureSet Features to convert to labels
  * @param attributeTypes Type for each attribute in a feature
  * @param attributeDomains Domains for each attribute in a feature
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 export async function _prepareLabelsFromAll(
@@ -1025,7 +1064,7 @@ export async function _prepareLabelsFromAll(
  * @param attributeDomains Domains for each attribute in a feature
  * @param attributeFormats Formats for each attribute in a feature
  * @param labelFormat Format for label
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 export async function _prepareLabelsFromPattern(
@@ -1089,7 +1128,7 @@ export async function _prepareLabelsFromPattern(
 
   // Add header names
   if (includeHeaderNames) {
-    labels.unshift(attributeNames);
+    labels.unshift(_extractHeaderNames(labelFormat));
   }
 
   return Promise.resolve(labels);

package/dist/collection/utils/test/downloadUtils.spec.js

@@ -189,9 +189,41 @@ describe("downloadUtils", () => {
             expect(title).toEqual(expectedTitle);
         });
     });
+    describe("_extractHeaderNames", () => {
+        it("handles a single-line label", () => {
+            const labelSpec = "{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+            const expectedHeaderNames = ["PSTLCITY__PSTLSTATE__PSTLZIP5"];
+            expect(headerNames).toEqual(expectedHeaderNames);
+        });
+        it("handles a multi-line label", () => {
+            const labelSpec = "{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+            const expectedHeaderNames = ["OWNERNM1", "PSTLADDRESS", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+            expect(headerNames).toEqual(expectedHeaderNames);
+        });
+        it("handles a multi-line label with a line without attributes", () => {
+            const labelSpec = "{OWNERNM1}|Line without attributes|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+            const expectedHeaderNames = ["OWNERNM1", "column_2", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+            expect(headerNames).toEqual(expectedHeaderNames);
+        });
+        it("handles a label with an Arcade expression", () => {
+            const labelSpec = "{expression/expr0}|{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+            const expectedHeaderNames = ["expr0", "OWNERNM1", "PSTLADDRESS", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+            expect(headerNames).toEqual(expectedHeaderNames);
+        });
+        it("handles a label with multiple Arcade expressions", () => {
+            const labelSpec = "{expression/expr3}: {expression/expr1}|{OWNERNM1}|{expression/expr0}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+            const expectedHeaderNames = ["expr3__expr1", "OWNERNM1", "expr0", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+            expect(headerNames).toEqual(expectedHeaderNames);
+        });
+    });
     describe("_getExpressionsFromLabel", () => {
         it("handles a label with ASCII expression names", () => {
-            const labelSpec = "{expression/expr0}\n{OWNERNM1}\n{PSTLADDRESS}\n{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+            const labelSpec = "{expression/expr0}|{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
             const expectedExpressions = ["{expression/expr0}"];
             const expressions = downloadUtils._getExpressionsFromLabel(labelSpec);
             expect(expressions).toEqual(expectedExpressions);

package/dist/collection/utils/test/downloadUtils.spec.tsx

@@ -251,10 +251,49 @@ describe("downloadUtils", () => {
 
   });
 
+  describe("_extractHeaderNames", () => {
+
+    it("handles a single-line label", () => {
+      const labelSpec = "{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+      const expectedHeaderNames = ["PSTLCITY__PSTLSTATE__PSTLZIP5"];
+      expect(headerNames).toEqual(expectedHeaderNames);
+    });
+
+    it("handles a multi-line label", () => {
+      const labelSpec = "{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+      const expectedHeaderNames = ["OWNERNM1", "PSTLADDRESS", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+      expect(headerNames).toEqual(expectedHeaderNames);
+    });
+
+    it("handles a multi-line label with a line without attributes", () => {
+      const labelSpec = "{OWNERNM1}|Line without attributes|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+      const expectedHeaderNames = ["OWNERNM1", "column_2", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+      expect(headerNames).toEqual(expectedHeaderNames);
+    });
+
+    it("handles a label with an Arcade expression", () => {
+      const labelSpec = "{expression/expr0}|{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+      const expectedHeaderNames = ["expr0", "OWNERNM1", "PSTLADDRESS", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+      expect(headerNames).toEqual(expectedHeaderNames);
+    });
+
+    it("handles a label with multiple Arcade expressions", () => {
+      const labelSpec = "{expression/expr3}: {expression/expr1}|{OWNERNM1}|{expression/expr0}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const headerNames = downloadUtils._extractHeaderNames(labelSpec);
+      const expectedHeaderNames = ["expr3__expr1", "OWNERNM1", "expr0", "PSTLCITY__PSTLSTATE__PSTLZIP5"];
+      expect(headerNames).toEqual(expectedHeaderNames);
+    });
+
+  });
+
   describe("_getExpressionsFromLabel", () => {
 
     it("handles a label with ASCII expression names", () => {
-      const labelSpec = "{expression/expr0}\n{OWNERNM1}\n{PSTLADDRESS}\n{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const labelSpec = "{expression/expr0}|{OWNERNM1}|{PSTLADDRESS}|{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
       const expectedExpressions = ["{expression/expr0}"];
       const expressions = downloadUtils._getExpressionsFromLabel(labelSpec);
       expect(expressions).toEqual(expectedExpressions);

package/dist/components/downloadUtils.js

@@ -2359,7 +2359,11 @@ const lineSeparatorChar = "|";
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
+ * @param isCSVExport Indicates if the export is for a CSV file
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns selectionSetNames that will be used for export filenames
  */
 async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -2385,6 +2389,9 @@ async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = tr
  * all attributes are exported
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
  * @param addColumnTitle Indicates if column headings should be included in output
+ * @param fields Fields to include in the export
+ * @param useFieldAliasNames Indicates if field alias names should be used in the export
+ * @param filterFields Indicates if fields should be filtered
  * @returns Promise resolving when function is done
  */
 async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -2623,6 +2630,30 @@ function _createFilename(selectionSetNames) {
     const title = selectionSetNames.length > 0 ? selectionSetNames.join(", ") : "download";
     return title;
 }
+/**
+ * Creates headings from a label format.
+ *
+ * @param labelFormat Format for label
+ * @returns A list of headings, with one heading for each line in the label format
+ */
+function _extractHeaderNames(labelFormat) {
+    // Split the format into lines
+    const lines = labelFormat.split(lineSeparatorChar);
+    // Generate a header for each line
+    const headerNames = lines.map((line, i) => {
+        // Find the field names in the line
+        const fieldNameSyms = line.match(/\{[^\}]*\}/g);
+        // Extract the field names from the symbols; if there are no symbols, use a default name; if a field name
+        // is an Arcade expression, extract the expression name
+        return fieldNameSyms
+            ? fieldNameSyms
+                .map(fieldName => fieldName.substring(1, fieldName.length - 1))
+                .map(fieldName => fieldName.startsWith("expression/") ? fieldName.substring(fieldName.indexOf("/") + 1) : fieldName)
+                .join("__")
+            : `column_${i + 1}`;
+    });
+    return headerNames;
+}
 /**
  * Extracts Arcade expression references from the lines of a label format.
  *
@@ -2756,7 +2787,7 @@ async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
                 webmapLayers = webmapLayers.filter((webmapLayer) => webmapLayer.type === "feature" && webmapLayer.layerId === layerRelationship.relatedTableId);
                 if (webmapLayers.length > 0) {
                     labelFormatProps = await _getLabelFormat(webmap, webmapLayers[0], formatUsingLayerPopup);
-                    labelFormatProps.relationshipId = relationshipId;
+                    labelFormatProps.relationshipId = relationshipId.toString();
                 }
                 else {
                     // Related layer info is not in webmap; get the label info from the related layer
@@ -2794,7 +2825,7 @@ async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
                     }
                     else {
                         labelFormatProps = await labelFormatPropsPromise;
-                        labelFormatProps.relationshipId = relationshipId;
+                        labelFormatProps.relationshipId = relationshipId.toString();
                     }
                 }
             }
@@ -2921,7 +2952,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  * @param ids List of ids to download
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving when function is done
  */
 async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = undefined, useFieldAliasNames = false, filterFields = false) {
@@ -3026,7 +3057,7 @@ async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true,
  * @param featureSet Features to convert to labels
  * @param attributeTypes Type for each attribute in a feature
  * @param attributeDomains Domains for each attribute in a feature
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomains, includeHeaderNames = false, useFieldAliasNames = false) {
@@ -3063,7 +3094,7 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
  * @param attributeDomains Domains for each attribute in a feature
  * @param attributeFormats Formats for each attribute in a feature
  * @param labelFormat Format for label
- * @param includeHeaderNames Add the label format at the front of the list of generated labels
+ * @param includeHeaderNames Add a heading entries at the beginning of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
 async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
@@ -3103,7 +3134,7 @@ async function _prepareLabelsFromPattern(layer, featureSet, attributeOrigNames,
     }));
     // Add header names
     if (includeHeaderNames) {
-        labels.unshift(attributeNames);
+        labels.unshift(_extractHeaderNames(labelFormat));
     }
     return Promise.resolve(labels);
 }

package/dist/components/instant-apps-export.js

@@ -167,7 +167,7 @@ const printStyling = `
   }
 
   .instant-apps-export-print .esri-legend--card__service-caption-text {
-    padding-bottom: 0;
+    padding-bottom: 4px;
   }
 
   .instant-apps-export-print__compass-container {
@@ -602,8 +602,10 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         }
     }
     handleLegendSetup() {
+        var _a;
         if (this.showIncludeLegend && this.view != null && this.includeMap && this.legendContainerEl != null) {
-            this.legendContainerEl.style.display = this.includeLegend ? 'block' : 'none';
+            const hasActiveLayers = this.legend != null && ((_a = this.legend.activeLayerInfos) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.legendContainerEl.style.display = this.includeLegend && hasActiveLayers ? 'block' : 'none';
         }
     }
     handleWidgetCreation() {
@@ -611,11 +613,11 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         this.handleCompassCreation();
     }
     handleLegendCreation() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (this.includeMap && this.view != null && this.showIncludeLegend && this.legendContainerEl != null) {
             const map = this.view.map;
             const legendMap = (_b = (_a = this.legend) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _d === void 0 ? void 0 : _d.id);
+            const checkId = ((_c = map === null || map === void 0 ? void 0 : map.portalItem) === null || _c === void 0 ? void 0 : _c.id) != null && ((_d = map === null || map === void 0 ? void 0 : map.portalItem) === null || _d === void 0 ? void 0 : _d.id) === ((_e = legendMap === null || legendMap === void 0 ? void 0 : legendMap.portalItem) === null || _e === void 0 ? void 0 : _e.id);
             if (!checkId) {
                 this.updateLegend();
             }
@@ -624,13 +626,17 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     updateLegend() {
         var _a;
         (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
-            var _a;
-            (_a = this.legend) === null || _a === void 0 ? void 0 : _a.destroy();
+            if (this.legend != null) {
+                this.legend.destroy();
+                this.legend = null;
+            }
             if (this.legendContainerEl != null) {
                 this.legendContainerEl.innerHTML = '';
+                const legendCont = document.createElement('div');
+                this.legendContainerEl.append(legendCont);
                 const [Legend] = await loadModules(['esri/widgets/Legend']);
                 this.legend = new Legend({
-                    container: this.legendContainerEl,
+                    container: legendCont,
                     view,
                     style: {
                         type: 'card',

package/dist/components/instant-apps-landing-page.js

@@ -84,7 +84,7 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
             fontFamily,
         };
         return (h("div", { style: this.backgroundImageSrc
-                ? Object.assign(Object.assign({}, style), { backgroundSize: 'cover', backgroundImage: `url("${this.backgroundImageSrc}")`, backgroundRepeat: 'no-repeat' }) : style, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), h("slot", { name: "secondary-action" }))));
+                ? Object.assign(Object.assign({}, style), { backgroundSize: 'cover', backgroundImage: `url("${this.backgroundImageSrc}")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }) : style, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), h("slot", { name: "secondary-action" }))));
     }
     renderIconImage() {
         return this.iconImage ? h("img", { class: `${CSS.iconImage}${this.getIconImageScale()}`, src: this.iconImage, alt: this.iconImageAltText }) : null;

package/dist/components/instant-apps-measurement.js

@@ -51,7 +51,7 @@ const InstantAppsMeasurement$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
     }
     renderActionPad() {
         const { messages, activeToolType } = this;
-        return (h("calcite-action-pad", { "expand-disabled": true, layout: "horizontal", position: "end" }, h("calcite-action", { class: activeToolType === 'distance' ? 'active-tool' : "", text: messages === null || messages === void 0 ? void 0 : messages.line, icon: "measure", scale: "m", "data-value": "distance", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.line)), h("calcite-action", { class: activeToolType === 'area' ? 'active-tool' : "", text: messages === null || messages === void 0 ? void 0 : messages.area, scale: "m", icon: "measure-area", "data-value": "area", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.area)), h("calcite-action", { class: activeToolType === 'point' ? 'active-tool' : "", text: messages === null || messages === void 0 ? void 0 : messages.point, scale: "m", icon: "pin-plus", "data-value": "point", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.point)), h("calcite-action", { text: messages === null || messages === void 0 ? void 0 : messages.clear, scale: "m", icon: "trash", "data-value": "clear", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.clear))));
+        return (h("calcite-action-pad", { "expand-disabled": true, layout: "horizontal", position: "end" }, h("calcite-action", { class: activeToolType === 'distance' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.line, icon: "measure", scale: "m", "data-value": "distance", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.line)), h("calcite-action", { class: activeToolType === 'area' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.area, scale: "m", icon: "measure-area", "data-value": "area", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.area)), h("calcite-action", { class: activeToolType === 'point' ? 'active-tool' : '', text: messages === null || messages === void 0 ? void 0 : messages.point, scale: "m", icon: "pin-plus", "data-value": "point", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.point)), h("calcite-action", { text: messages === null || messages === void 0 ? void 0 : messages.clear, scale: "m", icon: "trash", "data-value": "clear", onClick: this._handleToolClick.bind(this) }, h("calcite-tooltip", { "close-on-click": true, placement: "bottom", slot: "tooltip" }, messages === null || messages === void 0 ? void 0 : messages.clear))));
     }
     _handleToolClick(e) {
         var _a, _b, _c, _d;

package/dist/components/instant-apps-social-share2.js

@@ -12,9 +12,10 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './popover.js';
 
-const instantAppsSocialShareCss = ":host{display:block;--instant-apps-social-share-action-width:initial;--instant-apps-social-share-width--s:200px;--instant-apps-social-share-width--m:280px;--instant-apps-social-share-width--l:320px;--instant-apps-social-share-width-horizontal--s:300px;--instant-apps-social-share-width-horizontal--m:380px;--instant-apps-social-share-width-horizontal--l:420px;--instant-apps-social-share-background-color:var(--calcite-color-foreground-1);--instant-apps-social-share-popover-button-background-color:transparent;--instant-apps-social-share-popover-button-icon-color:var(--calcite-ui-icon-color);--instant-apps-social-share-embed-border:1px solid $border;--instant-apps-social-share-embed-text-area-text:#468540}:host .instant-apps-social-share__popover-button{background-color:var(--instant-apps-social-share-popover-button-background-color)}:host .instant-apps-social-share__popover-button calcite-icon{color:var(--instant-apps-social-share-popover-button-icon-color)}:host .instant-apps-social-share__dialog,:host .instant-apps-social-share__dialog-embed{background-color:var(--instant-apps-social-share-background-color);border:var(--instant-apps-social-share-embed-border)}:host .instant-apps-social-share__dialog{box-sizing:border-box;height:auto;padding:10px 0;border-radius:5px}:host .instant-apps-social-share__options{margin:0;padding:1% 0 0 0;list-style-type:none}:host .instant-apps-social-share__options li{box-sizing:border-box;display:flex;align-items:center;width:100%;padding:5%;transition:background-color 0.15s ease-out 0s}:host .instant-apps-social-share__options li .instant-apps-social-share__icon,:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{display:inline-block}:host .instant-apps-social-share__options li .instant-apps-social-share__icon{display:flex;align-items:center}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{width:85%;margin-left:10px;word-break:break-word}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text--rtl{margin-left:0;margin-right:10px}:host .instant-apps-social-share__options li:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}:host .instant-apps-social-share__tip{box-sizing:border-box;padding:0 5% 1% 5%}:host .instant-apps-social-share__tip-header{display:flex;align-items:center;color:#007ac2;margin:8px 0 5px 0}:host .instant-apps-social-share__tip-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__tip-content{line-height:17px;margin:0;padding-top:2%}:host .instant-apps-social-share__success{display:flex;flex-direction:column;padding:15px}:host .instant-apps-social-share__success-header{display:flex;align-items:center;font-weight:bold;margin-bottom:10px}:host .instant-apps-social-share__success-icon{display:flex;align-items:center;margin-right:5px}:host .instant-apps-social-share__success-icon calcite-icon{color:var(--calcite-color-status-success)}:host .instant-apps-social-share__success-message{line-height:16px}:host .instant-apps-social-share__embed{box-sizing:border-box;width:100%;padding:5%;margin-bottom:10px;border-top:1px solid #d3d3d3}:host .instant-apps-social-share__embed-header{display:flex;align-items:center;margin-bottom:5px}:host .instant-apps-social-share__embed-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__embed-code-text-area{border:1px solid #d3d3d3}:host .instant-apps-social-share__embed-code-text-area textarea{box-sizing:border-box;padding:4%;border:none;resize:none;background:transparent;width:100%;font-family:var(--calcite-sans-family);color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button{display:flex;align-items:center;text-align:start;width:100%;border:none;border-top:1px solid #d3d3d3;background-color:transparent;line-height:16px;font-weight:400;padding:3%;color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button calcite-icon{color:#007ac2;margin-right:3px}:host .instant-apps-social-share__embed-code-text-area button:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2);transition:background-color 0.15s ease-out 0s}:host .instant-apps-social-share__embed-text-area-text{font-weight:600;color:var(--instant-apps-social-share-embed-text-area-text)}:host .instant-apps-social-share__embed .instant-apps-social-share__text-area--rtl{text-align:left}:host .instant-apps-social-share__embed-dimensions{display:flex;justify-content:space-between;margin-top:10px}:host .instant-apps-social-share__embed-dimensions-input{width:47%;box-sizing:border-box}:host .instant-apps-social-share__embed-dimensions-input input{border:1px solid #d3d3d3;width:100%;height:25px;font-family:var(--calcite-sans-family)}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options{display:flex;justify-content:space-around;margin-bottom:8%}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li{flex-direction:column;padding:0}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li .instant-apps-social-share__option-text{word-break:break-word;margin-left:0;margin-top:10px;text-align:center}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li:hover{background-color:unset}:host .instant-apps-social-share__icon-container{display:flex;align-items:center}:host calcite-action{width:var(--instant-apps-social-share-action-width)}:host([scale=s]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--s)}:host([scale=s]) .instant-apps-social-share__icon{width:16px;height:16px}:host([scale=s]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size--1)}:host([scale=s]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--s)}:host([scale=s]) .instant-apps-social-share__tip-header,:host([scale=s]) .instant-apps-social-share__tip-content,:host([scale=s]) .instant-apps-social-share__embed-header,:host([scale=s]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--2)}:host([scale=m]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--m)}:host([scale=m]) .instant-apps-social-share__icon{width:24px;height:24px}:host([scale=m]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-0)}:host([scale=m]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--m)}:host([scale=m]) .instant-apps-social-share__tip-header,:host([scale=m]) .instant-apps-social-share__tip-content,:host([scale=m]) .instant-apps-social-share__embed-header,:host([scale=m]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--1)}:host([scale=l]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--l)}:host([scale=l]) .instant-apps-social-share__icon{width:32px;height:32px}:host([scale=l]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-1)}:host([scale=l]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--l)}:host([scale=l]) .instant-apps-social-share__tip-header,:host([scale=l]) .instant-apps-social-share__tip-content,:host([scale=l]) .instant-apps-social-share__embed-header,:host([scale=l]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size-0)}";
+const instantAppsSocialShareCss = ":host{display:block;--instant-apps-social-share-action-width:initial;--instant-apps-social-share-width--s:200px;--instant-apps-social-share-width--m:280px;--instant-apps-social-share-width--l:320px;--instant-apps-social-share-width-horizontal--s:300px;--instant-apps-social-share-width-horizontal--m:380px;--instant-apps-social-share-width-horizontal--l:420px;--instant-apps-social-share-background-color:var(--calcite-color-foreground-1);--instant-apps-social-share-popover-button-background-color:transparent;--instant-apps-social-share-popover-button-icon-color:var(--calcite-ui-icon-color);--instant-apps-social-share-embed-border:1px solid $border;--instant-apps-social-share-embed-text-area-text:#468540}:host .instant-apps-social-share__popover-button{background-color:var(--instant-apps-social-share-popover-button-background-color)}:host .instant-apps-social-share__popover-button calcite-icon{color:var(--instant-apps-social-share-popover-button-icon-color)}:host .instant-apps-social-share__dialog,:host .instant-apps-social-share__dialog-embed{background-color:var(--instant-apps-social-share-background-color);border:var(--instant-apps-social-share-embed-border)}:host .instant-apps-social-share__dialog{box-sizing:border-box;height:auto;padding:10px 0;border-radius:5px}:host .instant-apps-social-share__options{margin:0;padding:1% 0 0 0;list-style-type:none}:host .instant-apps-social-share__options li{box-sizing:border-box;display:flex;align-items:center;width:100%;padding:5%;transition:background-color 0.15s ease-out 0s}:host .instant-apps-social-share__options li .instant-apps-social-share__icon,:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{display:inline-block}:host .instant-apps-social-share__options li .instant-apps-social-share__icon{display:flex;align-items:center}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{width:85%;margin-left:10px;word-break:break-word}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text--rtl{margin-left:0;margin-right:10px}:host .instant-apps-social-share__options li:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}:host .instant-apps-social-share__options__x-logo--light path{fill:#000000}:host .instant-apps-social-share__options__x-logo--dark path{fill:#ffffff}:host .instant-apps-social-share__tip{box-sizing:border-box;padding:0 5% 1% 5%}:host .instant-apps-social-share__tip-header{display:flex;align-items:center;color:#007ac2;margin:8px 0 5px 0}:host .instant-apps-social-share__tip-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__tip-content{line-height:17px;margin:0;padding-top:2%}:host .instant-apps-social-share__success{display:flex;flex-direction:column;padding:15px}:host .instant-apps-social-share__success-header{display:flex;align-items:center;font-weight:bold;margin-bottom:10px}:host .instant-apps-social-share__success-icon{display:flex;align-items:center;margin-right:5px}:host .instant-apps-social-share__success-icon calcite-icon{color:var(--calcite-color-status-success)}:host .instant-apps-social-share__success-message{line-height:16px}:host .instant-apps-social-share__embed{box-sizing:border-box;width:100%;padding:5%;margin-bottom:10px;border-top:1px solid #d3d3d3}:host .instant-apps-social-share__embed-header{display:flex;align-items:center;margin-bottom:5px}:host .instant-apps-social-share__embed-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__embed-code-text-area{border:1px solid #d3d3d3}:host .instant-apps-social-share__embed-code-text-area textarea{box-sizing:border-box;padding:4%;border:none;resize:none;background:transparent;width:100%;font-family:var(--calcite-sans-family);color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button{display:flex;align-items:center;text-align:start;width:100%;border:none;border-top:1px solid #d3d3d3;background-color:transparent;line-height:16px;font-weight:400;padding:3%;color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button calcite-icon{color:#007ac2;margin-right:3px}:host .instant-apps-social-share__embed-code-text-area button:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2);transition:background-color 0.15s ease-out 0s}:host .instant-apps-social-share__embed-text-area-text{font-weight:600;color:var(--instant-apps-social-share-embed-text-area-text)}:host .instant-apps-social-share__embed .instant-apps-social-share__text-area--rtl{text-align:left;direction:ltr}:host .instant-apps-social-share__embed-dimensions{display:flex;justify-content:space-between;margin-top:10px}:host .instant-apps-social-share__embed-dimensions-input{width:47%;box-sizing:border-box}:host .instant-apps-social-share__embed-dimensions-input input{border:1px solid #d3d3d3;width:100%;height:25px;font-family:var(--calcite-sans-family)}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options{display:flex;justify-content:space-around;margin-bottom:8%}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li{flex-direction:column;padding:0}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li .instant-apps-social-share__option-text{word-break:break-word;margin-left:0;margin-top:10px;text-align:center}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li:hover{background-color:unset}:host .instant-apps-social-share__icon-container{display:flex;align-items:center}:host calcite-action{width:var(--instant-apps-social-share-action-width)}:host([scale=s]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--s)}:host([scale=s]) .instant-apps-social-share__icon{width:16px;height:16px}:host([scale=s]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size--1)}:host([scale=s]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--s)}:host([scale=s]) .instant-apps-social-share__tip-header,:host([scale=s]) .instant-apps-social-share__tip-content,:host([scale=s]) .instant-apps-social-share__embed-header,:host([scale=s]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--2)}:host([scale=m]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--m)}:host([scale=m]) .instant-apps-social-share__icon{width:24px;height:24px}:host([scale=m]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-0)}:host([scale=m]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--m)}:host([scale=m]) .instant-apps-social-share__tip-header,:host([scale=m]) .instant-apps-social-share__tip-content,:host([scale=m]) .instant-apps-social-share__embed-header,:host([scale=m]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--1)}:host([scale=l]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--l)}:host([scale=l]) .instant-apps-social-share__icon{width:32px;height:32px}:host([scale=l]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-1)}:host([scale=l]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--l)}:host([scale=l]) .instant-apps-social-share__tip-header,:host([scale=l]) .instant-apps-social-share__tip-content,:host([scale=l]) .instant-apps-social-share__embed-header,:host([scale=l]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size-0)}";
 
 const base = 'instant-apps-social-share';
+const CALCITE_MODE_DARK = '.calcite-mode-dark';
 const CSS = {
     base,
     dialog: `${base}__dialog`,
@@ -32,6 +33,10 @@ const CSS = {
         vertical: `${base}__layout--vertical`,
         horizontal: `${base}__layout--horizontal`,
     },
+    xLogo: {
+        light: `${base}__x-logo--light`,
+        dark: `${base}__x-logo--dark`,
+    },
     success: {
         container: `${base}__success`,
         header: `${base}__success-header`,
@@ -59,7 +64,7 @@ const CSS = {
 };
 const SOCIAL_URL_TEMPLATES = {
     facebook: 'https://www.facebook.com/sharer/sharer.php?u={url}',
-    twitter: 'https://twitter.com/intent/tweet?text={text}&url={url}',
+    x: 'https://x.com/intent/post?url={url}',
     linkedIn: 'https://www.linkedin.com/sharing/share-offsite/?url={url}',
 };
 const SHORTEN_API = 'https://arcg.is/prod/shorten';
@@ -240,7 +245,7 @@ const InstantAppsSocialShare = /*@__PURE__*/ proxyCustomElement(class InstantApp
         return (h("ul", { ref: el => (this.shareListRef = el), class: CSS.options, role: "menu" }, h("li", { id: "copyToClipboard", onClick: this.handleShareItem.bind(this, 'link'), onKeyDown: this.handleOptionKeyDown('link'), role: "menuitem", tabindex: "0" }, h("span", { class: CSS.icon }, h("calcite-icon", { icon: "link", scale: this.scale })), h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_b = options === null || options === void 0 ? void 0 : options.link) === null || _b === void 0 ? void 0 : _b.label)), this.socialMedia
             ? [
                 h("li", { onClick: this.handleShareItem.bind(this, 'facebook'), onKeyDown: this.handleOptionKeyDown('facebook'), role: "menuitem", tabindex: "0" }, h("span", { class: CSS.icon }, this.renderFacebookIcon()), h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_c = options === null || options === void 0 ? void 0 : options.facebook) === null || _c === void 0 ? void 0 : _c.label)),
-                h("li", { onClick: this.handleShareItem.bind(this, 'twitter'), onKeyDown: this.handleOptionKeyDown('twitter'), role: "menuitem", tabindex: "0" }, h("span", { class: CSS.icon }, this.renderTwitterIcon()), h("span", { class: `${CSS.optionText}${optionText_RTL}` }, "Twitter")),
+                h("li", { onClick: this.handleShareItem.bind(this, 'x'), onKeyDown: this.handleOptionKeyDown('x'), role: "menuitem", tabindex: "0" }, h("span", { class: CSS.icon }, this.renderXIcon()), h("span", { class: `${CSS.optionText}${optionText_RTL}` }, "X")),
                 h("li", { onClick: this.handleShareItem.bind(this, 'linkedIn'), onKeyDown: this.handleOptionKeyDown('linkedIn'), role: "menuitem", tabindex: "0" }, h("span", { class: CSS.icon }, this.renderLinkedInIcon()), h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_d = options === null || options === void 0 ? void 0 : options.linkedIn) === null || _d === void 0 ? void 0 : _d.label)),
             ]
             : null));
@@ -257,8 +262,9 @@ const InstantAppsSocialShare = /*@__PURE__*/ proxyCustomElement(class InstantApp
     renderFacebookIcon() {
         return (h("svg", { height: "100%", style: { fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: '2' }, version: "1.1", viewBox: "0 0 512 512", width: "100%", xmlns: "http://www.w3.org/2000/svg" }, h("g", null, h("path", { d: "M512,256c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z", style: { fill: '#1877f2', fillRule: 'nonzero' } }), h("path", { d: "M355.65,330l11.35,-74l-71,0l0,-48.022c0,-20.245 9.917,-39.978 41.719,-39.978l32.281,0l0,-63c0,0 -29.297,-5 -57.305,-5c-58.476,0 -96.695,35.44 -96.695,99.6l0,56.4l-65,0l0,74l65,0l0,178.89c13.033,2.045 26.392,3.11 40,3.11c13.608,0 26.966,-1.065 40,-3.11l0,-178.89l59.65,0Z", style: { fill: '#fff', fillRule: 'nonzero' } }))));
     }
-    renderTwitterIcon() {
-        return (h("svg", { height: "100%", style: { fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: '2' }, version: "1.1", viewBox: "0 0 512 512", width: "100%", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { height: "400", style: { fill: 'none' }, width: "400", x: "56", y: "56" }), h("path", { d: "M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104", style: { fill: '#1da1f2', fillRule: 'nonzero' } })));
+    renderXIcon() {
+        const isCalciteModeDark = !!this.el.closest(CALCITE_MODE_DARK);
+        return (h("svg", { class: isCalciteModeDark ? CSS.xLogo.dark : CSS.xLogo.light, width: "1200", height: "1227", viewBox: "0 0 1200 1227", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { height: "400", style: { fill: 'none' }, width: "400", x: "56", y: "56" }), h("path", { d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z", fill: isCalciteModeDark ? 'white' : 'black' })));
     }
     renderLinkedInIcon() {
         return (h("svg", { height: "100%", style: { fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: '2' }, version: "1.1", viewBox: "0 0 512 512", width: "100%", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "g5891" }, h("path", { d: "M512,64c0,-35.323 -28.677,-64 -64,-64l-384,0c-35.323,0 -64,28.677 -64,64l0,384c0,35.323 28.677,64 64,64l384,0c35.323,0 64,-28.677 64,-64l0,-384Z", id: "background", style: { fill: '#2867b2' } }), h("g", { id: "shapes" }, h("rect", { height: "257.962", id: "rect11", style: { fill: '#fff' }, width: "85.76", x: "61.053", y: "178.667" }), h("path", { d: "M104.512,54.28c-29.341,0 -48.512,19.29 -48.512,44.573c0,24.752 18.588,44.574 47.377,44.574l0.554,0c29.903,0 48.516,-19.822 48.516,-44.574c-0.555,-25.283 -18.611,-44.573 -47.935,-44.573Z", id: "path13-0", style: { fill: '#fff', fillRule: 'nonzero' } }), h("path", { d: "M357.278,172.601c-45.49,0 -65.866,25.017 -77.276,42.589l0,-36.523l-85.738,0c1.137,24.197 0,257.961 0,257.961l85.737,0l0,-144.064c0,-7.711 0.554,-15.42 2.827,-20.931c6.188,-15.4 20.305,-31.352 43.993,-31.352c31.012,0 43.436,23.664 43.436,58.327l0,138.02l85.741,0l0,-147.93c0,-79.237 -42.305,-116.097 -98.72,-116.097Z", id: "path15", style: { fill: '#fff', fillRule: 'nonzero' } })))));
@@ -324,7 +330,7 @@ const InstantAppsSocialShare = /*@__PURE__*/ proxyCustomElement(class InstantApp
                     setTimeout(() => this.closePopover(), 2000);
                 return;
             case 'facebook':
-            case 'twitter':
+            case 'x':
             case 'linkedIn':
                 let socialWin;
                 if (isSafari) {
@@ -336,7 +342,7 @@ const InstantAppsSocialShare = /*@__PURE__*/ proxyCustomElement(class InstantApp
                 const urlData = {
                     url: encodeURI(urlToUse),
                 };
-                const data = type === 'twitter' ? Object.assign(Object.assign({}, urlData), { text: this.shareText }) : urlData;
+                const data = type === 'x' ? Object.assign(Object.assign({}, urlData), { text: this.shareText }) : urlData;
                 const [intl] = await loadModules(['esri/intl']);
                 const url = intl.substitute(SOCIAL_URL_TEMPLATES[type], data);
                 if (this.mode === 'popover') {