@atlaskit/media-common 11.1.0 → 11.2.0

package/analytics/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/analytics/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/analytics/index.d.ts"
       ]

package/dist/cjs/mediaFeatureFlags/mediaFeatureFlags.js

@@ -56,7 +56,8 @@ var defaultMediaFeatureFlags = exports.defaultMediaFeatureFlags = {
   mediaInline: false,
   // We can't yet switch this feature on
   // TODO https://product-fabric.atlassian.net/browse/MEX-104
-  folderUploads: false
+  folderUploads: false,
+  commentsOnMedia: false
 };
 
 /**

package/dist/cjs/mediaFeatureFlags/productKeys.js

@@ -10,12 +10,14 @@ var productKeys = {
      * Note: Confluence Flags must be prefixed with "confluence.frontend" in order to integrate properly with the product
      */
     mediaInline: 'confluence.frontend.fabric.editor.media.inline',
-    folderUploads: 'confluence.frontend.media.picker.folder.uploads'
+    folderUploads: 'confluence.frontend.media.picker.folder.uploads',
+    commentsOnMedia: 'confluence.frontend.renderer.comments-on-media'
   },
   jira: {
     // Manged by Linking Platform. No Rollout plan found for Jira
     mediaInline: '',
-    folderUploads: 'issue.details.media-picker-folder-upload'
+    folderUploads: 'issue.details.media-picker-folder-upload',
+    commentsOnMedia: ''
   }
 };
 var getProductKeys = exports.getProductKeys = function getProductKeys() {

package/dist/es2019/mediaFeatureFlags/mediaFeatureFlags.js

@@ -35,7 +35,8 @@ export const defaultMediaFeatureFlags = {
   mediaInline: false,
   // We can't yet switch this feature on
   // TODO https://product-fabric.atlassian.net/browse/MEX-104
-  folderUploads: false
+  folderUploads: false,
+  commentsOnMedia: false
 };
 
 /**

package/dist/es2019/mediaFeatureFlags/productKeys.js

@@ -4,12 +4,14 @@ const productKeys = {
      * Note: Confluence Flags must be prefixed with "confluence.frontend" in order to integrate properly with the product
      */
     mediaInline: 'confluence.frontend.fabric.editor.media.inline',
-    folderUploads: 'confluence.frontend.media.picker.folder.uploads'
+    folderUploads: 'confluence.frontend.media.picker.folder.uploads',
+    commentsOnMedia: 'confluence.frontend.renderer.comments-on-media'
   },
   jira: {
     // Manged by Linking Platform. No Rollout plan found for Jira
     mediaInline: '',
-    folderUploads: 'issue.details.media-picker-folder-upload'
+    folderUploads: 'issue.details.media-picker-folder-upload',
+    commentsOnMedia: ''
   }
 };
 export const getProductKeys = () => productKeys;

package/dist/esm/mediaFeatureFlags/mediaFeatureFlags.js

@@ -48,7 +48,8 @@ export var defaultMediaFeatureFlags = {
   mediaInline: false,
   // We can't yet switch this feature on
   // TODO https://product-fabric.atlassian.net/browse/MEX-104
-  folderUploads: false
+  folderUploads: false,
+  commentsOnMedia: false
 };
 
 /**

package/dist/esm/mediaFeatureFlags/productKeys.js

@@ -4,12 +4,14 @@ var productKeys = {
      * Note: Confluence Flags must be prefixed with "confluence.frontend" in order to integrate properly with the product
      */
     mediaInline: 'confluence.frontend.fabric.editor.media.inline',
-    folderUploads: 'confluence.frontend.media.picker.folder.uploads'
+    folderUploads: 'confluence.frontend.media.picker.folder.uploads',
+    commentsOnMedia: 'confluence.frontend.renderer.comments-on-media'
   },
   jira: {
     // Manged by Linking Platform. No Rollout plan found for Jira
     mediaInline: '',
-    folderUploads: 'issue.details.media-picker-folder-upload'
+    folderUploads: 'issue.details.media-picker-folder-upload',
+    commentsOnMedia: ''
   }
 };
 export var getProductKeys = function getProductKeys() {

package/dist/types/mediaFeatureFlags/mediaFeatureFlags.d.ts

@@ -1,4 +1,4 @@
-import { RequiredMediaFeatureFlags, MediaFeatureFlags } from './types';
+import { type RequiredMediaFeatureFlags, type MediaFeatureFlags } from './types';
 export declare const filterFeatureFlagNames: (flags: RequiredMediaFeatureFlags) => Array<keyof MediaFeatureFlags>;
 /**
  * Takes a record of {Media Feature Flag Names → boolean}.

package/dist/types/mediaFeatureFlags/productKeys.d.ts

@@ -1,2 +1,2 @@
-import { ProductKeys } from './types';
+import { type ProductKeys } from './types';
 export declare const getProductKeys: () => ProductKeys;

package/dist/types/mediaFeatureFlags/types.d.ts

@@ -1,6 +1,7 @@
 export interface MediaFeatureFlags {
     mediaInline?: boolean;
     folderUploads?: boolean;
+    commentsOnMedia?: boolean;
 }
 export interface WithMediaFeatureFlags {
     featureFlags?: MediaFeatureFlags;

package/dist/types-ts4.5/mediaFeatureFlags/mediaFeatureFlags.d.ts

@@ -1,4 +1,4 @@
-import { RequiredMediaFeatureFlags, MediaFeatureFlags } from './types';
+import { type RequiredMediaFeatureFlags, type MediaFeatureFlags } from './types';
 export declare const filterFeatureFlagNames: (flags: RequiredMediaFeatureFlags) => Array<keyof MediaFeatureFlags>;
 /**
  * Takes a record of {Media Feature Flag Names → boolean}.

package/dist/types-ts4.5/mediaFeatureFlags/productKeys.d.ts

@@ -1,2 +1,2 @@
-import { ProductKeys } from './types';
+import { type ProductKeys } from './types';
 export declare const getProductKeys: () => ProductKeys;

package/dist/types-ts4.5/mediaFeatureFlags/types.d.ts

@@ -1,6 +1,7 @@
 export interface MediaFeatureFlags {
     mediaInline?: boolean;
     folderUploads?: boolean;
+    commentsOnMedia?: boolean;
 }
 export interface WithMediaFeatureFlags {
     featureFlags?: MediaFeatureFlags;

package/downloadUrl/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/downloadUrl.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/downloadUrl.d.ts"
       ]

package/mediaFeatureFlags/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/mediaFeatureFlags/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/mediaFeatureFlags/index.d.ts"
       ]

package/mediaTypeUtils/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/mediaTypeUtils/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/mediaTypeUtils/index.d.ts"
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-common",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "Includes common utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,8 +43,8 @@
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/section-message": "^6.4.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/section-message": "^6.5.0",
     "@babel/runtime": "^7.0.0",
     "immer": "^9.0.12",
     "uuid-validate": "^0.0.3"
@@ -64,7 +64,7 @@
     "enzyme": "^3.10.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.4.2"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/test-helpers/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/test-helpers/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/test-helpers/index.d.ts"
       ]

package/dist/cjs/docs/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "createMediaUseOnlyNotice", {
-  enumerable: true,
-  get: function get() {
-    return _mediaUseOnly.createMediaUseOnlyNotice;
-  }
-});
-Object.defineProperty(exports, "createRxjsNotice", {
-  enumerable: true,
-  get: function get() {
-    return _rxjsNotice.createRxjsNotice;
-  }
-});
-Object.defineProperty(exports, "createSingletonNotice", {
-  enumerable: true,
-  get: function get() {
-    return _singletonNotice.createSingletonNotice;
-  }
-});
-var _rxjsNotice = require("./rxjs-notice");
-var _mediaUseOnly = require("./media-use-only");
-var _singletonNotice = require("./singleton-notice");

package/dist/cjs/docs/media-use-only.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createMediaUseOnlyNotice = createMediaUseOnlyNotice;
-var _react = _interopRequireDefault(require("react"));
-var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
-function AlternativePackagesMessage(_ref) {
-  var alternatePackages = _ref.alternatePackages;
-  if (!alternatePackages) {
-    return null;
-  }
-  if (alternatePackages.length === 1) {
-    return /*#__PURE__*/_react.default.createElement("p", null, "Consider using", ' ', /*#__PURE__*/_react.default.createElement("a", {
-      href: alternatePackages[0].link
-    }, alternatePackages[0].name), ' ', "instead.");
-  }
-  return /*#__PURE__*/_react.default.createElement("p", null, "Consider using one of these packages instead:", /*#__PURE__*/_react.default.createElement("ul", null, alternatePackages.map(function (p) {
-    return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
-      href: p.link
-    }, p.name));
-  })));
-}
-function createMediaUseOnlyNotice(componentName, alternatePackages) {
-  return /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
-    title: "Internal Media Use Only",
-    appearance: "error"
-  }, /*#__PURE__*/_react.default.createElement("p", null, componentName, " is intended for internal use by the Media Platform and as a transitive dependency of a media package within your product."), /*#__PURE__*/_react.default.createElement("p", null, "Direct use of this component is not supported."), /*#__PURE__*/_react.default.createElement(AlternativePackagesMessage, {
-    alternatePackages: alternatePackages
-  }));
-}

package/dist/cjs/docs/rxjs-notice.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRxjsNotice = createRxjsNotice;
-var _react = _interopRequireDefault(require("react"));
-var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
-function createRxjsNotice(componentName) {
-  return /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
-    title: "RxJS compatilbity",
-    appearance: "warning"
-  }, /*#__PURE__*/_react.default.createElement("p", null, componentName, " currently requires", ' ', /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://www.npmjs.com/package/rxjs/v/5.5.12"
-  }, "rxjs@^5.5.0"), " as peer dependency."));
-}

package/dist/cjs/docs/singleton-notice.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createSingletonNotice = createSingletonNotice;
-var _react = _interopRequireDefault(require("react"));
-var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
-function createSingletonNotice(componentName) {
-  var title = "".concat(componentName, " is a singleton package");
-  return /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
-    title: title,
-    appearance: "error"
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Having multiple versions of ", componentName, " installed can result in potential issues, such as media preview failures."), /*#__PURE__*/_react.default.createElement("p", null, "You must ensure that your application dependencies only resolve to a unique package version, if you are:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("b", null, "A platform consumer"), " \u2014 i.e. you are using ", componentName, ' ', "directly in a npm package, for instance in a monorepository. Define", ' ', componentName, " in your package.json file as a", ' ', /*#__PURE__*/_react.default.createElement("code", null, "peerDependency"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "devDependency"), " (for local testing)."), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("b", null, "A product consumer"), " \u2014 i.e. you are working directly into your application. Define ", componentName, " in your package.json file as a direct dependency."))), /*#__PURE__*/_react.default.createElement("p", null, "If you have any questions or need assistance in consuming this package correctly, please reach out to the", ' ', /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://atlassian.slack.com/archives/C020CGJDJ3A",
-    target: "_blank"
-  }, "#help-media-platform"), ' ', "channel."));
-}

package/dist/es2019/docs/index.js

@@ -1,3 +0,0 @@
-export { createRxjsNotice } from './rxjs-notice';
-export { createMediaUseOnlyNotice } from './media-use-only';
-export { createSingletonNotice } from './singleton-notice';

package/dist/es2019/docs/media-use-only.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-function AlternativePackagesMessage({
-  alternatePackages
-}) {
-  if (!alternatePackages) {
-    return null;
-  }
-  if (alternatePackages.length === 1) {
-    return /*#__PURE__*/React.createElement("p", null, "Consider using", ' ', /*#__PURE__*/React.createElement("a", {
-      href: alternatePackages[0].link
-    }, alternatePackages[0].name), ' ', "instead.");
-  }
-  return /*#__PURE__*/React.createElement("p", null, "Consider using one of these packages instead:", /*#__PURE__*/React.createElement("ul", null, alternatePackages.map(p => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
-    href: p.link
-  }, p.name)))));
-}
-export function createMediaUseOnlyNotice(componentName, alternatePackages) {
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: "Internal Media Use Only",
-    appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, componentName, " is intended for internal use by the Media Platform and as a transitive dependency of a media package within your product."), /*#__PURE__*/React.createElement("p", null, "Direct use of this component is not supported."), /*#__PURE__*/React.createElement(AlternativePackagesMessage, {
-    alternatePackages: alternatePackages
-  }));
-}

package/dist/es2019/docs/rxjs-notice.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-export function createRxjsNotice(componentName) {
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: "RxJS compatilbity",
-    appearance: "warning"
-  }, /*#__PURE__*/React.createElement("p", null, componentName, " currently requires", ' ', /*#__PURE__*/React.createElement("a", {
-    href: "https://www.npmjs.com/package/rxjs/v/5.5.12"
-  }, "rxjs@^5.5.0"), " as peer dependency."));
-}

package/dist/es2019/docs/singleton-notice.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-export function createSingletonNotice(componentName) {
-  const title = `${componentName} is a singleton package`;
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: title,
-    appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, "Having multiple versions of ", componentName, " installed can result in potential issues, such as media preview failures."), /*#__PURE__*/React.createElement("p", null, "You must ensure that your application dependencies only resolve to a unique package version, if you are:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "A platform consumer"), " \u2014 i.e. you are using ", componentName, ' ', "directly in a npm package, for instance in a monorepository. Define", ' ', componentName, " in your package.json file as a", ' ', /*#__PURE__*/React.createElement("code", null, "peerDependency"), " and ", /*#__PURE__*/React.createElement("code", null, "devDependency"), " (for local testing)."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "A product consumer"), " \u2014 i.e. you are working directly into your application. Define ", componentName, " in your package.json file as a direct dependency."))), /*#__PURE__*/React.createElement("p", null, "If you have any questions or need assistance in consuming this package correctly, please reach out to the", ' ', /*#__PURE__*/React.createElement("a", {
-    href: "https://atlassian.slack.com/archives/C020CGJDJ3A",
-    target: "_blank"
-  }, "#help-media-platform"), ' ', "channel."));
-}

package/dist/esm/docs/index.js

@@ -1,3 +0,0 @@
-export { createRxjsNotice } from './rxjs-notice';
-export { createMediaUseOnlyNotice } from './media-use-only';
-export { createSingletonNotice } from './singleton-notice';

package/dist/esm/docs/media-use-only.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-function AlternativePackagesMessage(_ref) {
-  var alternatePackages = _ref.alternatePackages;
-  if (!alternatePackages) {
-    return null;
-  }
-  if (alternatePackages.length === 1) {
-    return /*#__PURE__*/React.createElement("p", null, "Consider using", ' ', /*#__PURE__*/React.createElement("a", {
-      href: alternatePackages[0].link
-    }, alternatePackages[0].name), ' ', "instead.");
-  }
-  return /*#__PURE__*/React.createElement("p", null, "Consider using one of these packages instead:", /*#__PURE__*/React.createElement("ul", null, alternatePackages.map(function (p) {
-    return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
-      href: p.link
-    }, p.name));
-  })));
-}
-export function createMediaUseOnlyNotice(componentName, alternatePackages) {
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: "Internal Media Use Only",
-    appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, componentName, " is intended for internal use by the Media Platform and as a transitive dependency of a media package within your product."), /*#__PURE__*/React.createElement("p", null, "Direct use of this component is not supported."), /*#__PURE__*/React.createElement(AlternativePackagesMessage, {
-    alternatePackages: alternatePackages
-  }));
-}

package/dist/esm/docs/rxjs-notice.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-export function createRxjsNotice(componentName) {
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: "RxJS compatilbity",
-    appearance: "warning"
-  }, /*#__PURE__*/React.createElement("p", null, componentName, " currently requires", ' ', /*#__PURE__*/React.createElement("a", {
-    href: "https://www.npmjs.com/package/rxjs/v/5.5.12"
-  }, "rxjs@^5.5.0"), " as peer dependency."));
-}

package/dist/esm/docs/singleton-notice.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import SectionMessage from '@atlaskit/section-message';
-export function createSingletonNotice(componentName) {
-  var title = "".concat(componentName, " is a singleton package");
-  return /*#__PURE__*/React.createElement(SectionMessage, {
-    title: title,
-    appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, "Having multiple versions of ", componentName, " installed can result in potential issues, such as media preview failures."), /*#__PURE__*/React.createElement("p", null, "You must ensure that your application dependencies only resolve to a unique package version, if you are:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "A platform consumer"), " \u2014 i.e. you are using ", componentName, ' ', "directly in a npm package, for instance in a monorepository. Define", ' ', componentName, " in your package.json file as a", ' ', /*#__PURE__*/React.createElement("code", null, "peerDependency"), " and ", /*#__PURE__*/React.createElement("code", null, "devDependency"), " (for local testing)."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "A product consumer"), " \u2014 i.e. you are working directly into your application. Define ", componentName, " in your package.json file as a direct dependency."))), /*#__PURE__*/React.createElement("p", null, "If you have any questions or need assistance in consuming this package correctly, please reach out to the", ' ', /*#__PURE__*/React.createElement("a", {
-    href: "https://atlassian.slack.com/archives/C020CGJDJ3A",
-    target: "_blank"
-  }, "#help-media-platform"), ' ', "channel."));
-}

package/dist/types/docs/index.d.ts

@@ -1,3 +0,0 @@
-export { createRxjsNotice } from './rxjs-notice';
-export { createMediaUseOnlyNotice } from './media-use-only';
-export { createSingletonNotice } from './singleton-notice';

package/dist/types/docs/media-use-only.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function createMediaUseOnlyNotice(componentName: string, alternatePackages?: {
-    name: string;
-    link: string;
-}[]): JSX.Element;

package/dist/types/docs/rxjs-notice.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function createRxjsNotice(componentName: string): JSX.Element;

package/dist/types/docs/singleton-notice.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function createSingletonNotice(componentName: string): JSX.Element;

package/dist/types-ts4.5/docs/index.d.ts

@@ -1,3 +0,0 @@
-export { createRxjsNotice } from './rxjs-notice';
-export { createMediaUseOnlyNotice } from './media-use-only';
-export { createSingletonNotice } from './singleton-notice';

package/dist/types-ts4.5/docs/media-use-only.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function createMediaUseOnlyNotice(componentName: string, alternatePackages?: {
-    name: string;
-    link: string;
-}[]): JSX.Element;

package/dist/types-ts4.5/docs/rxjs-notice.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function createRxjsNotice(componentName: string): JSX.Element;

package/dist/types-ts4.5/docs/singleton-notice.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function createSingletonNotice(componentName: string): JSX.Element;