@atlaskit/media-picker 62.0.0 → 63.0.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/media-picker
 
+## 63.0.2
+
+### Patch Changes
+
+- [`e3d4c39b20c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3d4c39b20c) - Remove version.json file.
+  Use injected package name and version from environment variable instead.
+- Updated dependencies
+
+## 63.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 63.0.0
+
+### Major Changes
+
+- [`e9de546cfc7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9de546cfc7) - Migrate to emotion from styled-components
+
+### Minor Changes
+
+- [`bfde909c9b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfde909c9b4) - Add new feature flag mediaUploadApiV2
+- [`35e43fcc798`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35e43fcc798) - Add ufo feature flag logging
+
+### Patch Changes
+
+- [`c0f85687ea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0f85687ea0) - Enabled UFO logger for all examples for Media-Picker
+- [`c2ede50a80a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2ede50a80a) - Add media region and environment returned from media API response into failed analytic events.
+- [`19899f3e100`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19899f3e100) - Make emotion as dev dependency instead peer dependency
+- Updated dependencies
+
 ## 62.0.0
 
 ### Major Changes

package/dist/cjs/components/browser/browser.js

@@ -182,13 +182,6 @@ exports.BrowserBase = BrowserBase;
   config: defaultConfig
 });
 var Browser = (0, _mediaCommon.withMediaAnalyticsContext)((0, _analytics.getPackageAttributes)(COMPONENT_NAME), {
-  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()(BrowserBase));
 exports.Browser = Browser;

package/dist/cjs/components/clipboard/clipboard.js

@@ -200,13 +200,6 @@ exports.ClipboardBase = ClipboardBase;
   config: defaultConfig
 });
 var Clipboard = (0, _mediaCommon.withMediaAnalyticsContext)((0, _analytics.getPackageAttributes)(COMPONENT_NAME), {
-  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()(ClipboardBase));
 exports.Clipboard = Clipboard;

package/dist/cjs/components/dropzone/dropzone.js

@@ -382,13 +382,6 @@ var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
 
 exports.DropzoneBase = DropzoneBase;
 var Dropzone = (0, _mediaCommon.withMediaAnalyticsContext)((0, _analytics.getPackageAttributes)(COMPONENT_NAME), {
-  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: _analytics.LOGGED_FEATURE_FLAGS
 })((0, _analyticsNext.withAnalyticsEvents)()(DropzoneBase));
 exports.Dropzone = Dropzone;

package/dist/cjs/util/analytics.js

@@ -3,17 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.getPackageAttributes = getPackageAttributes;
 exports.getRequestMetadata = getRequestMetadata;
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _version = require("../version.json");
+var _mediaCommon = require("@atlaskit/media-common");
+
+var relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+var packageName = "@atlaskit/media-picker";
+var packageVersion = "63.0.2";
+var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
+exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
+var LOGGED_FEATURE_FLAG_KEYS = (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(relevantFlags);
+exports.LOGGED_FEATURE_FLAG_KEYS = LOGGED_FEATURE_FLAG_KEYS;
 
 function getPackageAttributes(componentName) {
   return {
-    packageName: _version.name,
-    packageVersion: _version.version,
+    packageName: packageName,
+    packageVersion: packageVersion,
     componentName: componentName,
     component: componentName
   };

package/dist/cjs/util/ufoExperiences.js

@@ -13,12 +13,14 @@ var _ufo = require("@atlaskit/ufo");
 
 var _mediaClient = require("@atlaskit/media-client");
 
-var _version = require("../version.json");
+var _analytics = require("./analytics");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var packageName = "@atlaskit/media-picker";
+var packageVersion = "63.0.2";
 var ufoExperience;
 
 var initExperience = function initExperience(id, componentName) {
@@ -28,7 +30,8 @@ var initExperience = function initExperience(id, componentName) {
         component: "media-picker-".concat(componentName)
       },
       type: _ufo.ExperienceTypes.Experience,
-      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+      featureFlags: _analytics.LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new _ufo.ConcurrentExperience('media-upload', inlineExperience);
   }
@@ -54,8 +57,8 @@ var succeedMediaUploadUfoExperience = function succeedMediaUploadUfoExperience(i
   (_getExperience = getExperience(id)) === null || _getExperience === void 0 ? void 0 : _getExperience.success({
     metadata: {
       fileAttributes: properties,
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     }
@@ -68,8 +71,8 @@ var failMediaUploadUfoExperience = function failMediaUploadUfoExperience(id, pro
   var _getExperience2;
 
   var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
-    packageName: _version.name,
-    packageVersion: _version.version,
+    packageName: packageName,
+    packageVersion: packageVersion,
     mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
     mediaRegion: (0, _mediaClient.getMediaRegion)()
   });

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "62.0.0"
+	"version": "63.0.2"
 }

package/dist/es2019/components/browser/browser.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
 import { LocalUploadComponentReact } from '../localUploadReact';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 const defaultConfig = {
   uploadParams: {}
 };
@@ -153,12 +153,5 @@ _defineProperty(BrowserBase, "defaultProps", {
 });
 
 export const Browser = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(BrowserBase));

package/dist/es2019/components/clipboard/clipboard.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
 export const getFilesFromClipboard = files => {
   return Array.from(files).map(file => {
@@ -147,12 +147,5 @@ _defineProperty(ClipboardBase, "defaultProps", {
 });
 
 export const Clipboard = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(ClipboardBase));

package/dist/es2019/components/dropzone/dropzone.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_MEDIA_CHANNEL, getMediaFeatureFlag, withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, getMediaFeatureFlag, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { isWebkitSupported } from '@atlaskit/media-ui/browser';
 import { getFilesFromItems, getFilesFromFileSystemEntries } from 'flat-files';
 import { LocalUploadComponentReact } from '../localUploadReact';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 
 function dragContainsFiles(event) {
   if (!event.dataTransfer) {
@@ -281,12 +281,5 @@ export class DropzoneBase extends LocalUploadComponentReact {
 
 }
 export const Dropzone = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(DropzoneBase));

package/dist/es2019/util/analytics.js

@@ -1,6 +1,19 @@
 import { isRequestError } from '@atlaskit/media-client';
-import { name as packageName, version as packageVersion } from '../version.json'; // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
+import { filterFeatureFlagKeysAllProducts, filterFeatureFlagNames } from '@atlaskit/media-common'; // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
+const relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+const packageName = "@atlaskit/media-picker";
+const packageVersion = "63.0.2";
+export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export function getPackageAttributes(componentName) {
   return {
     packageName,

package/dist/es2019/util/ufoExperiences.js

@@ -1,6 +1,8 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { LOGGED_FEATURE_FLAG_KEYS } from './analytics';
+const packageName = "@atlaskit/media-picker";
+const packageVersion = "63.0.2";
 let ufoExperience;
 
 const initExperience = (id, componentName) => {
@@ -10,7 +12,8 @@ const initExperience = (id, componentName) => {
         component: `media-picker-${componentName}`
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new ConcurrentExperience('media-upload', inlineExperience);
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "62.0.0"
+	"version": "63.0.2"
 }

package/dist/esm/components/browser/browser.js

@@ -12,10 +12,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import isValidId from 'uuid-validate';
 import { LocalUploadComponentReact } from '../localUploadReact';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 var defaultConfig = {
   uploadParams: {}
 };
@@ -166,12 +166,5 @@ _defineProperty(BrowserBase, "defaultProps", {
 });
 
 export var Browser = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(BrowserBase));

package/dist/esm/components/browser/index.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/components/clipboard/clipboard.js

@@ -11,10 +11,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { LocalUploadComponentReact } from '../localUploadReact';
 import { LocalFileSource } from '../../service/types';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 import { appendTimestamp } from '../../util/appendTimestamp';
 export var getFilesFromClipboard = function getFilesFromClipboard(files) {
   return Array.from(files).map(function (file) {
@@ -184,12 +184,5 @@ _defineProperty(ClipboardBase, "defaultProps", {
 });
 
 export var Clipboard = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(ClipboardBase));

package/dist/esm/components/clipboard/index.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/components/dropzone/dropzone.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,17 +6,18 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_MEDIA_CHANNEL, getMediaFeatureFlag, withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { ANALYTICS_MEDIA_CHANNEL, getMediaFeatureFlag, withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { isWebkitSupported } from '@atlaskit/media-ui/browser';
 import { getFilesFromItems, getFilesFromFileSystemEntries } from 'flat-files';
 import { LocalUploadComponentReact } from '../localUploadReact';
-import { getPackageAttributes } from '../../util/analytics';
+import { getPackageAttributes, LOGGED_FEATURE_FLAGS } from '../../util/analytics';
 
 function dragContainsFiles(event) {
   if (!event.dataTransfer) {
@@ -372,12 +372,5 @@ export var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
   return DropzoneBase;
 }(LocalUploadComponentReact);
 export var Dropzone = withMediaAnalyticsContext(getPackageAttributes(COMPONENT_NAME), {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: true,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: true
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(DropzoneBase));

package/dist/esm/components/dropzone/index.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/components/localUploadReact.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/service/uploadServiceImpl.js

@@ -1,8 +1,8 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import uuidV4 from 'uuid/v4';
 import { UploadController, getMediaTypeFromMimeType, isMimeTypeSupportedByBrowser, globalMediaEventEmitter, RequestError } from '@atlaskit/media-client';
 import { RECENTS_COLLECTION } from '@atlaskit/media-client/constants';

package/dist/esm/util/analytics.js

@@ -1,6 +1,19 @@
 import { isRequestError } from '@atlaskit/media-client';
-import { name as packageName, version as packageVersion } from '../version.json'; // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
+import { filterFeatureFlagKeysAllProducts, filterFeatureFlagNames } from '@atlaskit/media-common'; // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
+var relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+var packageName = "@atlaskit/media-picker";
+var packageVersion = "63.0.2";
+export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export var LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/getPreviewFromBlob.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getDimensionsFromBlob } from '@atlaskit/media-client';
 export var isUnknownDimensions = function isUnknownDimensions(dimensions) {
   return !dimensions.width && !dimensions.height;

package/dist/esm/util/getPreviewFromImage.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getImageInfo, getFileInfo } from '@atlaskit/media-ui';
 export function getPreviewFromImage(_x, _x2) {
   return _getPreviewFromImage.apply(this, arguments);

package/dist/esm/util/ufoExperiences.js

@@ -6,7 +6,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { LOGGED_FEATURE_FLAG_KEYS } from './analytics';
+var packageName = "@atlaskit/media-picker";
+var packageVersion = "63.0.2";
 var ufoExperience;
 
 var initExperience = function initExperience(id, componentName) {
@@ -16,7 +18,8 @@ var initExperience = function initExperience(id, componentName) {
         component: "media-picker-".concat(componentName)
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new ConcurrentExperience('media-upload', inlineExperience);
   }

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/media-picker",
-	"version": "62.0.0"
+	"version": "63.0.2"
 }

package/dist/types/util/analytics.d.ts

@@ -1,5 +1,7 @@
 import { RequestMetadata } from '@atlaskit/media-client';
 import { PackageAttributes } from '@atlaskit/media-common';
 export declare type ComponentName = 'browser' | 'clipboard' | 'dropzone';
+export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
+export declare const LOGGED_FEATURE_FLAG_KEYS: string[];
 export declare function getPackageAttributes(componentName: ComponentName): PackageAttributes;
 export declare function getRequestMetadata(error?: Error): RequestMetadata | undefined;

package/example-helpers/UfoWrapper.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { enableMediaUfoLogger } from '@atlaskit/media-test-helpers';
+import { payloadPublisher } from '@atlassian/ufo';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const UfoLoggerWrapper: React.FC<Props> = ({ children }) => {
+  enableMediaUfoLogger(payloadPublisher);
+  return <>{children}</>;
+};

package/example-helpers/{styled.ts → styles.ts}

@@ -1,15 +1,17 @@
-import styled from 'styled-components';
-export interface DropzoneContainerProps {
+import { css } from '@emotion/react';
+import { PastedImageStyleType } from './stylesWrapper';
+
+interface DropzoneContainerProps {
   isActive: boolean;
 }
 
-export const PopupContainer = styled.div`
+export const popupContainerStyles = css`
   display: flex;
   flex-direction: column;
   overflow: scroll;
 `;
 
-export const PopupHeader = styled.div`
+export const popupHeaderStyles = css`
   border-bottom: 1px solid #ccc;
   margin-bottom: 15px;
   display: flex;
@@ -21,12 +23,12 @@ export const PopupHeader = styled.div`
   }
 `;
 
-export const PreviewImageWrapper = styled.div`
+export const previewImageWrapperStyles = css`
   position: relative;
   margin-right: 15px;
 `;
 
-export const InfoWrapper = styled.pre`
+export const infoWrapperStyles = css`
   position: absolute;
   width: 160px;
   color: black;
@@ -36,30 +38,25 @@ export const InfoWrapper = styled.pre`
   text-align: center;
 `;
 
-export const DropzoneContainer = styled.div`
+export const dropzoneContainerStyles = ({
+  isActive,
+}: DropzoneContainerProps) => css`
   width: 600px;
   min-height: 500px;
   border: 1px dashed transparent;
-
-  ${(props: DropzoneContainerProps) =>
-    props.isActive
-      ? `
-    border-color: gray;
-  `
-      : ''};
+  ${isActive ? `border-color: gray;` : ''}
 `;
 
-export const DropzoneConfigOptions = styled.div``;
-export const DropzoneRoot = styled.div`
+export const dropzoneRootStyles = css`
   display: flex;
 `;
 
-export const DropzoneContentWrapper = styled.div`
+export const dropzoneContentWrapperStyles = css`
   display: flex;
   min-height: 200px;
 `;
 
-export const PreviewsWrapper = styled.div`
+export const previewsWrapperStyles = css`
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -67,17 +64,17 @@ export const PreviewsWrapper = styled.div`
   margin-bottom: 20px;
 `;
 
-export const PreviewsTitle = styled.h1`
+export const previewsTitleStyles = css`
   width: 100%;
 `;
 
-export const UploadPreviewsFlexRow = styled.div`
+export const uploadPreviewsFlexRowStyles = css`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 `;
 
-export const DropzoneItemsInfo = styled.div`
+export const dropzoneItemsInfoStyles = css`
   flex: 1;
   min-width: 600px;
   display: flex;
@@ -85,19 +82,20 @@ export const DropzoneItemsInfo = styled.div`
   flex-direction: column;
 `;
 
-export interface ClipboardContainerProps {
+interface ClipboardContainerProps {
   isWindowFocused: boolean;
 }
 
-export const ClipboardContainer = styled.div`
+export const clipboardContainerStyles = ({
+  isWindowFocused,
+}: ClipboardContainerProps) => css`
   padding: 10px;
   min-height: 400px;
 
-  border: ${({ isWindowFocused }: ClipboardContainerProps) =>
-    isWindowFocused ? `1px dashed gray` : `1px dashed transparent`};
+  border: ${isWindowFocused ? `1px dashed gray` : `1px dashed transparent`};
 `;
 
-export const InfoContainer = styled.div`
+export const infoContainerStyles = css`
   position: absolute;
   top: 0;
   left: 0;
@@ -122,6 +120,7 @@ export const InfoContainer = styled.div`
   }
 `;
 
-export const PastedImage = styled.img`
-  width: 100%;
+export const pastedImageStyles = (style: PastedImageStyleType) => css`
+  width: ${style.width ? `${style.width}px` : '100%'};
+  ${style.height ? `height: ${style.height}px` : ''};
 `;

package/example-helpers/stylesWrapper.tsx

@@ -0,0 +1,105 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode, forwardRef } from 'react';
+
+import {
+  clipboardContainerStyles,
+  dropzoneContainerStyles,
+  dropzoneContentWrapperStyles,
+  dropzoneItemsInfoStyles,
+  infoContainerStyles,
+  infoWrapperStyles,
+  pastedImageStyles,
+  popupContainerStyles,
+  popupHeaderStyles,
+  previewImageWrapperStyles,
+  previewsTitleStyles,
+  previewsWrapperStyles,
+  uploadPreviewsFlexRowStyles,
+} from './styles';
+
+export const PopupContainer = ({ children }: { children: ReactNode }) => {
+  return <div css={popupContainerStyles}>{children}</div>;
+};
+
+export const PopupHeader = ({ children }: { children: ReactNode }) => {
+  return <div css={popupHeaderStyles}>{children}</div>;
+};
+
+export const PreviewImageWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={previewImageWrapperStyles}>{children}</div>;
+};
+
+export const InfoWrapper = ({ children }: { children: ReactNode }) => {
+  return <pre css={infoWrapperStyles}>{children}</pre>;
+};
+
+export const DropzoneContainer = forwardRef(
+  ({ isActive }: { isActive: boolean }, ref) => {
+    return (
+      <div
+        css={dropzoneContainerStyles({ isActive })}
+        ref={ref as React.RefObject<HTMLDivElement>}
+      />
+    );
+  },
+);
+
+export const DropzoneContentWrapper = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  return <div css={dropzoneContentWrapperStyles}>{children}</div>;
+};
+
+export const PreviewsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div css={previewsWrapperStyles}>{children}</div>;
+};
+
+export const PreviewsTitle = ({ children }: { children: ReactNode }) => {
+  return <h1 css={previewsTitleStyles}>{children}</h1>;
+};
+
+export const UploadPreviewsFlexRow = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  return <div css={uploadPreviewsFlexRowStyles}>{children}</div>;
+};
+
+export const DropzoneItemsInfo = ({ children }: { children: ReactNode }) => {
+  return <div css={dropzoneItemsInfoStyles}>{children}</div>;
+};
+
+export const ClipboardContainer = ({
+  isWindowFocused,
+  children,
+}: {
+  isWindowFocused: boolean;
+  children: ReactNode;
+}) => {
+  return (
+    <div css={clipboardContainerStyles({ isWindowFocused })}>{children}</div>
+  );
+};
+
+export const InfoContainer = ({ children }: { children: ReactNode }) => {
+  return <div css={infoContainerStyles}>{children}</div>;
+};
+
+export type PastedImageStyleType = {
+  width: number | string;
+  height: number | string;
+};
+
+type PastedImageProps = {
+  src: string;
+  title: string;
+  style: PastedImageStyleType;
+};
+
+export const PastedImage = ({ src, style, title }: PastedImageProps) => {
+  return <img src={src} title={title} css={pastedImageStyles(style)} />;
+};

package/example-helpers/upload-preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PreviewImageWrapper, InfoWrapper } from './styled';
+import { PreviewImageWrapper, InfoWrapper } from './stylesWrapper';
 import { PreviewData } from './types';
 import { Card } from '@atlaskit/media-card';
 import { FileIdentifier } from '@atlaskit/media-client';

package/example-helpers/upload-previews.tsx

@@ -9,7 +9,7 @@ import {
   PreviewsTitle,
   PreviewsWrapper,
   UploadPreviewsFlexRow,
-} from './styled';
+} from './stylesWrapper';
 import { PreviewData } from './types';
 
 export interface PreviewsDataState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-picker",
-  "version": "62.0.0",
+  "version": "63.0.2",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/media-client": "^16.0.0",
-    "@atlaskit/media-common": "^2.13.0",
-    "@atlaskit/media-ui": "^22.0.0",
+    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -41,19 +41,18 @@
     "uuid-validate": "^0.0.3"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-core": "^33.0.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.2.0",
-    "@atlaskit/analytics-namespaced-context": "^6.4.0",
+    "@atlaskit/analytics-listeners": "^8.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^11.1.0",
-    "@atlaskit/media-card": "^73.6.0",
+    "@atlaskit/dropdown-menu": "^11.2.0",
+    "@atlaskit/media-card": "^74.0.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/spinner": "^15.0.0",
@@ -61,6 +60,7 @@
     "@atlaskit/toggle": "^12.4.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.12",
+    "@emotion/react": "^11.7.1",
     "@types/enzyme": "^3.1.15",
     "@types/react": "^16.8.0",
     "enzyme": "^3.10.0",

package/report.api.md

@@ -0,0 +1,244 @@
+## API Report File for "@atlaskit/media-picker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { MediaClient } from '@atlaskit/media-client';
+import { MediaFeatureFlags } from '@atlaskit/media-common/mediaFeatureFlags';
+import { MediaFeatureFlags as MediaFeatureFlags_2 } from '@atlaskit/media-common';
+import { default as React_2 } from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithMediaClientConfigProps } from '@atlaskit/media-client';
+
+export declare class Browser extends React_2.PureComponent<
+  BrowserWithMediaClientConfigProps,
+  State_3
+> {
+  private mounted;
+  static displayName: string;
+  static Browser?: BrowserWithMediaClientConfigComponent;
+  state: {
+    Browser: BrowserWithMediaClientConfigComponent | undefined;
+  };
+  componentDidMount(): void;
+  componentWillUnmount(): void;
+  UNSAFE_componentWillMount(): Promise<void>;
+  render(): JSX.Element | null;
+}
+
+export declare interface BrowserConfig extends LocalUploadConfig {
+  readonly multiple?: boolean;
+  readonly fileExtensions?: Array<string>;
+  readonly replaceFileId?: string;
+}
+
+declare interface BrowserOwnProps {
+  config: BrowserConfig;
+  isOpen?: boolean;
+  onClose?: () => void;
+  /**
+   * This prop will be mainly used for those contexts (like Editor) where there is no react lifecylce and we cannot rerender easily.
+   * Otherwise, isOpen prop is preferred.
+   */
+  onBrowseFn?: (browse: () => void) => void;
+  onCancelFn?: (cancel: (uniqueIdentifier: string) => void) => void;
+  children?: (browse: () => void) => React_2.ReactChild;
+}
+
+declare type BrowserProps = LocalUploadComponentBaseProps & BrowserOwnProps;
+
+declare type BrowserWithMediaClientConfigComponent = React_2.ComponentType<
+  BrowserWithMediaClientConfigProps
+>;
+
+declare type BrowserWithMediaClientConfigProps = WithMediaClientConfigProps<
+  Omit<BrowserProps, 'config'> & {
+    config?: BrowserConfig;
+  }
+>;
+
+declare class Clipboard_2 extends React_2.PureComponent<
+  ClipboardWithMediaClientConfigProps,
+  State_2
+> {
+  static displayName: string;
+  static Clipboard?: ClipboardWithMediaClientConfigComponent;
+  state: {
+    Clipboard: ClipboardWithMediaClientConfigComponent | undefined;
+  };
+  UNSAFE_componentWillMount(): Promise<void>;
+  render(): JSX.Element | null;
+}
+export { Clipboard_2 as Clipboard };
+
+declare interface ClipboardConfig extends LocalUploadConfig {}
+
+declare type ClipboardProps = LocalUploadComponentBaseProps & {
+  config: ClipboardConfig;
+};
+
+declare type ClipboardWithMediaClientConfigComponent = React_2.ComponentType<
+  ClipboardWithMediaClientConfigProps
+>;
+
+declare type ClipboardWithMediaClientConfigProps = WithMediaClientConfigProps<
+  Omit<ClipboardProps, 'config'> & {
+    config?: ClipboardConfig;
+  }
+>;
+
+export declare class Dropzone extends React_2.PureComponent<
+  DropzoneWithMediaClientConfigProps,
+  State
+> {
+  static displayName: string;
+  static Dropzone?: DropzoneWithMediaClientConfigComponent;
+  static MediaPickerErrorBoundary?: MediaPickerErrorBoundaryComponent;
+  state: {
+    Dropzone: DropzoneWithMediaClientConfigComponent | undefined;
+    MediaPickerErrorBoundary: MediaPickerErrorBoundaryComponent | undefined;
+  };
+  UNSAFE_componentWillMount(): Promise<void>;
+  render(): JSX.Element | null;
+}
+
+export declare interface DropzoneConfig extends LocalUploadConfig {
+  container?: HTMLElement;
+  headless?: boolean;
+}
+
+declare interface DropzoneDragEnterEventPayload {
+  length: number;
+}
+
+declare interface DropzoneDragLeaveEventPayload {
+  length: number;
+}
+
+declare type DropzoneProps = LocalUploadComponentBaseProps & {
+  config: DropzoneConfig;
+  onDrop?: () => void;
+  onDragEnter?: (payload: DropzoneDragEnterEventPayload) => void;
+  onDragLeave?: (payload: DropzoneDragLeaveEventPayload) => void;
+  onCancelFn?: (cancel: (uniqueIdentifier: string) => void) => void;
+};
+
+declare type DropzoneWithMediaClientConfigComponent = React_2.ComponentType<
+  DropzoneWithMediaClientConfigProps
+>;
+
+declare type DropzoneWithMediaClientConfigProps = WithMediaClientConfigProps<
+  DropzoneProps
+>;
+
+export declare type ImagePreview = NonImagePreview & {
+  readonly dimensions: {
+    readonly width: number;
+    readonly height: number;
+  };
+  readonly scaleFactor: number;
+};
+
+export declare const isImagePreview: (
+  preview: Preview,
+) => preview is ImagePreview;
+
+declare type LocalUploadComponentBaseProps = {
+  mediaClient: MediaClient;
+  config: LocalUploadConfig;
+  onUploadsStart?: (payload: UploadsStartEventPayload) => void;
+  onPreviewUpdate?: (payload: UploadPreviewUpdateEventPayload) => void;
+  onEnd?: (payload: UploadEndEventPayload) => void;
+  onError?: (payload: UploadErrorEventPayload) => void;
+  featureFlags?: MediaFeatureFlags_2;
+} & WithAnalyticsEventsProps;
+
+export declare interface LocalUploadConfig {
+  uploadParams: UploadParams;
+  shouldCopyFileToRecents?: boolean;
+  featureFlags?: MediaFeatureFlags;
+}
+
+declare type MediaError_2 = {
+  readonly fileId?: string;
+  readonly name: MediaErrorName;
+  readonly description: string;
+  readonly rawError?: Error;
+};
+export { MediaError_2 as MediaError };
+
+export declare type MediaErrorName =
+  | 'object_create_fail'
+  | 'metadata_fetch_fail'
+  | 'token_fetch_fail'
+  | 'token_update_fail'
+  | 'token_source_empty'
+  | 'upload_fail'
+  | 'user_token_fetch_fail'
+  | 'remote_upload_fail'
+  | 'invalid_uuid';
+
+export declare type MediaFile = {
+  readonly id: string;
+  readonly name: string;
+  readonly size: number;
+  readonly creationDate: number;
+  readonly type: string;
+  readonly occurrenceKey?: string;
+};
+
+declare type MediaPickerAnalyticsErrorBoundaryProps = {
+  data?: {
+    [k: string]: any;
+  };
+};
+
+declare type MediaPickerErrorBoundaryComponent = React_2.ComponentType<
+  MediaPickerAnalyticsErrorBoundaryProps
+>;
+
+export declare type NonImagePreview = {
+  readonly file?: Blob;
+};
+
+export declare type Preview = NonImagePreview | ImagePreview;
+
+declare type State = {
+  Dropzone?: DropzoneWithMediaClientConfigComponent;
+  MediaPickerErrorBoundary?: MediaPickerErrorBoundaryComponent;
+};
+
+declare type State_2 = {
+  Clipboard?: ClipboardWithMediaClientConfigComponent;
+};
+
+declare type State_3 = {
+  Browser?: BrowserWithMediaClientConfigComponent;
+};
+
+export declare type UploadEndEventPayload = {
+  readonly file: MediaFile;
+};
+
+export declare type UploadErrorEventPayload = {
+  readonly fileId: string;
+  readonly error: MediaError_2;
+};
+
+export declare interface UploadParams {
+  collection?: string;
+}
+
+export declare type UploadPreviewUpdateEventPayload = {
+  readonly file: MediaFile;
+  readonly preview: Preview;
+};
+
+export declare type UploadsStartEventPayload = {
+  readonly files: MediaFile[];
+};
+
+export {};
+```