@atlaskit/media-picker 62.0.0 → 63.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-picker
 
+## 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,13 +3,30 @@
 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 _mediaCommon = require("@atlaskit/media-common");
+
 var _version = require("../version.json");
 
+var relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+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,

package/dist/cjs/util/ufoExperiences.js

@@ -13,6 +13,8 @@ var _ufo = require("@atlaskit/ufo");
 
 var _mediaClient = require("@atlaskit/media-client");
 
+var _analytics = require("./analytics");
+
 var _version = require("../version.json");
 
 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; }
@@ -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);
   }

package/dist/cjs/version.json

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

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,18 @@
 import { isRequestError } from '@atlaskit/media-client';
+import { filterFeatureFlagKeysAllProducts, filterFeatureFlagNames } from '@atlaskit/media-common';
 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
 
+const relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+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,5 +1,6 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+import { LOGGED_FEATURE_FLAG_KEYS } from './analytics';
 import { name as packageName, version as packageVersion } from '../version.json';
 let ufoExperience;
 
@@ -10,7 +11,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.0"
 }

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/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/dropzone/dropzone.js

@@ -13,11 +13,11 @@ 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, 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/util/analytics.js

@@ -1,6 +1,18 @@
 import { isRequestError } from '@atlaskit/media-client';
+import { filterFeatureFlagKeysAllProducts, filterFeatureFlagNames } from '@atlaskit/media-common';
 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
 
+var relevantFlags = {
+  newCardExperience: true,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: true,
+  mediaUploadApiV2: true
+};
+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/ufoExperiences.js

@@ -6,6 +6,7 @@ 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 { LOGGED_FEATURE_FLAG_KEYS } from './analytics';
 import { name as packageName, version as packageVersion } from '../version.json';
 var ufoExperience;
 
@@ -16,7 +17,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.0"
 }

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.0",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,8 @@
   "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-common": "^2.14.0",
+    "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -44,16 +44,15 @@
     "@atlaskit/media-core": "^33.0.0",
     "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/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": "^73.7.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",