@pega/custom-dx-components 24.1.10 → 24.1.12

package/README.md

@@ -18,4 +18,4 @@ Ensure you have access to the following in your system:
 
 ## Latest Documentation
 
-Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-components-pega-infinity-23.html)
+Find the latest documentation on using **DX Component Builder** [here](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-component-builder.html)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "24.1.10",
+  "version": "24.1.12",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/build-all/helper.js

@@ -37,7 +37,7 @@ export const getBuildComponentQuestions = async ()  => {
 
   if (components.length == 0) {
     console.log(chalk.redBright("No components to build"));
-    process.exit(1);
+    process.exit();
   }
 
   return [

package/src/tasks/build-comp/helper.js

@@ -8,7 +8,7 @@ import chalk from 'chalk';
 import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
 import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
 
-export const getPublishComponentQuestions = async () => {
+export const getPublishComponentQuestions = async componentKey => {
   const components = await getComponents();
 
   if (components.length === 0) {
@@ -23,7 +23,9 @@ export const getPublishComponentQuestions = async () => {
       name: 'componentKey',
       type: 'rawlist',
       message: 'Select component to build',
-      choices: components
+      choices: components,
+      default: componentKey,
+      when: () => !componentKey
     },
     {
       name: 'sourceMap',

package/src/tasks/build-comp/index.js

@@ -29,9 +29,15 @@ export default async options => {
     content = { componentKey, sourceMap, devBuild};
   }
   else {
-    const questions = await getPublishComponentQuestions();
+    // VS Code pluggin would send in the component
+    let paramComponentKey;
+    if (options.params.length == 4) {
+      paramComponentKey = options.params[3];
+    }
+
+    const questions = await getPublishComponentQuestions(paramComponentKey);
     const answers = await inquirer.prompt(questions);
-    ({ componentKey, sourceMap, devBuild } = answers);
+    ({ componentKey = paramComponentKey, sourceMap, devBuild } = answers);
 
     content = {
       ...answers

package/src/tasks/create/templates/Constellation/Field/Boolean/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -8,6 +8,7 @@ import {
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Date/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Date/index.tsx.mustache

@@ -3,6 +3,7 @@ import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } f
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Field/DateTime/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/DateTime/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import DateTimeFormatter from "./date-time";

package/src/tasks/create/templates/Constellation/Field/Decimal/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -12,6 +12,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -36,22 +36,21 @@ const statelistData = {
   ]
 };
 
-window.PCore.getDataPageUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    }
-  };
-};
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getDataPageUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      }
+    };
+  };
 
   const props = {
     countryCode: configProps.countryCode,

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   URLDisplay
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)

package/src/tasks/create/templates/Constellation/Field/Integer/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Integer/index.tsx.mustache

@@ -3,6 +3,7 @@ import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Te
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Picklist/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist/index.tsx.mustache

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetSt
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -2,6 +2,7 @@
 import { useMemo } from 'react';
 import { RadioButton, RadioButtonGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { formatExists, textFormatter } from './textformat-utils';

package/src/tasks/create/templates/Constellation/Field/Text/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text/index.tsx.mustache

@@ -9,6 +9,7 @@ import {
 } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Field/Text-Email/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text-Email/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { suggestionsHandler } from './suggestions-handler';

package/src/tasks/create/templates/Constellation/Field/Text-Input/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text-Input/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // include in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { suggestionsHandler } from './suggestions-handler';

package/src/tasks/create/templates/Constellation/Field/Text-Phone/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   withConfiguration
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Text-URL/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef} from "react";
 import { Input, FieldValueList, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import {formatExists,textFormatter, urlFormatter} from "./text-url";

package/src/tasks/create/templates/Constellation/Field/TimeofDay/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/TimeofDay/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { TimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 
 // includes in bundle

package/src/tasks/create/templates/Constellation/Template/DETAILS/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Template/DETAILS/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Fragment, Children, ReactElement } from 'react';
 import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Fragment, Children, ReactElement } from 'react';
 import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 

package/src/tasks/create/templates/Constellation/Template/FORM/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Template/FORM/index.tsx.mustache

@@ -2,6 +2,7 @@ import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-co
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/Constellation/Template/FORM-region/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

package/src/tasks/create/templates/Constellation/Template/PAGE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Template/PAGE/index.tsx.mustache

@@ -3,6 +3,7 @@ import { OneColumnPage as OneColumn, withConfiguration } from '@pega/cosmos-reac
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
 // import { registerIcon } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 
 

package/src/tasks/create/templates/Constellation/Widget/CASE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.tsx.mustache

@@ -20,36 +20,34 @@ if (!window.PCore) {
   window.PCore = {};
 }
 
-window.PCore.getConstants = () => {
-  return {
-    CASE_INFO: {
-      CASE_INFO_ID: 'caseInfo.ID'
-    }
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getConstants = () => {
+    return {
+      CASE_INFO: {
+        CASE_INFO_ID: 'caseInfo.ID'
+      }
+    };
   };
-};
 
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
+  window.PCore.getLocaleUtils = () => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
   };
-};
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(historyData);
-      });
-    }
+  window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(historyData);
+        });
+      }
+    };
   };
-};
-
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-
     getPConnect: () => {
       return {
         getValue: value => {

package/src/tasks/create/templates/Constellation/Widget/CASE/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Table, Text, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 

package/src/tasks/create/templates/Constellation/Widget/PAGE/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -46,24 +46,21 @@ const worklistData = {
   }
 };
 
-window.PCore.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    }
-  };
-};
-
-
-
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getDataApiUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(worklistData);
+        });
+      }
+    };
+  };
 
   const props = {
     ...configProps,

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';