@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/es2019/ui/ColorPalette/styles.js

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export const ColorPaletteWrapper = styled.div`
+export const colorPaletteWrapper = css`
   padding: 0 ${gridSize()}px;
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
   display: flex;

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
@@ -11,11 +12,11 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types'; // helps adjusts position of popup
 
-const ColorPickerButtonWrapper = styled.div`
+const colorPickerButtonWrapper = css`
   position: relative;
 `; // Control the size of color picker buttons and preview
 
-const ColorPickerWrapper = styled.div`
+const colorPickerWrapper = css`
   border-radius: ${borderRadius()}px;
   background-color: white;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
@@ -64,13 +65,15 @@ const ColorPickerButton = props => {
       return;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
+    }, jsx("div", {
+      css: colorPickerWrapper
+    }, jsx(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
@@ -80,10 +83,12 @@ const ColorPickerButton = props => {
   };
 
   const title = props.title || '';
-  return /*#__PURE__*/React.createElement(ColorPickerButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: colorPickerButtonWrapper
+  }, jsx(Tooltip, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -8,7 +8,7 @@ import { Field } from '@atlaskit/form';
 import AKToggle from '@atlaskit/toggle';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
-import { RequiredIndicator } from './common/RequiredIndicator';
+import { requiredIndicator } from './common/RequiredIndicator';
 const toggleFieldWrapper = css`
   display: flex;
 `;
@@ -27,8 +27,14 @@ function validate(value, isRequired) {
 function handleOnChange(onChange, onFieldChange, event) {
   var _event$target;
 
-  onChange((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false);
-  onFieldChange(name, true);
+  onChange((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false); // Note: prior to bumping typescript to version 2.4.2 onFieldChange
+  // was being called with a global variable (which had a value of '')
+  // While this was not intended, the code still worked as expected.
+  // In typescript 2.4.2 accessing the global variable name has been
+  // deprecated, so this has been replaced with the value it was
+  // previously passing.
+
+  onFieldChange('', true);
 }
 
 function Checkbox({
@@ -97,7 +103,8 @@ function Toggle({
       css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? jsx(RequiredIndicator, {
+    }, label, isRequired ? jsx("span", {
+      css: requiredIndicator,
       "aria-hidden": "true"
     }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),

package/dist/es2019/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import { Fragment, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field, Fieldset as AKFieldset } from '@atlaskit/form';
 import { ValidationError } from '../types';
@@ -12,7 +14,7 @@ function validate(value, isRequired) {
   }
 }
 
-const RequiredIndicator = styled.span`
+const requiredIndicator = css`
   color: #bf2600;
 `;
 
@@ -43,7 +45,7 @@ function CheckboxGroupInner({
     onFieldChange();
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AKFieldset, {
+  return jsx(Fragment, null, jsx(AKFieldset, {
     legend: label
   }, options.map(({
     label: optionLabel,
@@ -55,7 +57,7 @@ function CheckboxGroupInner({
       _onChange(optionValue, event.target.checked);
     };
 
-    return /*#__PURE__*/React.createElement(AKCheckbox, _extends({
+    return jsx(AKCheckbox, _extends({
       key: i
     }, restFieldProps, {
       isRequired: false,
@@ -63,7 +65,7 @@ function CheckboxGroupInner({
       isChecked: isChecked,
       onChange: onOptionChange
     }));
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     error: error,
     description: description
   }));
@@ -81,21 +83,22 @@ export default function CheckboxGroup({
     isRequired = false,
     items: options
   } = field;
-  const label = /*#__PURE__*/React.createElement(React.Fragment, null, labelBase, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+  const label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
+    css: requiredIndicator,
     "aria-hidden": "true"
-  }, " *") : null);
+  }, ' ', "*") : null);
 
   const _onFieldChange = useCallback(() => {
     onFieldChange(name, true);
   }, [name, onFieldChange]);
 
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
     validate: value => validate(value, isRequired)
   }, props => {
-    return /*#__PURE__*/React.createElement(CheckboxGroupInner, _extends({
+    return jsx(CheckboxGroupInner, _extends({
       label: label,
       description: description,
       options: options,

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -1,11 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import { Fragment } from 'react';
 import { Field } from '@atlaskit/form';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { isValidHex } from '../utils';
-import styled from 'styled-components';
 import { validate } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
-import { RequiredIndicator } from './common/RequiredIndicator';
+import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
 import ColorPickerButton from '../../ColorPickerButton';
@@ -100,14 +101,14 @@ const colorPalette = [{
 ].map(color => ({ ...color,
   border: DEFAULT_BORDER_COLOR
 }));
-const ColorPickerWrapper = styled.div`
+const colorPickerWrapper = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: ${4 * gridSize()}px;
   padding-right: ${gridSize()}px;
 `;
-const ColorPickerLabel = styled.label`
+const colorPickerLabel = css`
   font-size: ${headingSizes.h400.size}px;
   margin-top: 0;
 `;
@@ -133,7 +134,7 @@ const ColorPicker = props => {
     onFieldChange(name, currentColor !== colorValue);
   };
 
-  return /*#__PURE__*/React.createElement(ColorPickerButton, {
+  return jsx(ColorPickerButton, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
@@ -158,7 +159,7 @@ const ColorPickerField = ({
     defaultValue,
     isRequired
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -166,16 +167,21 @@ const ColorPickerField = ({
   }, ({
     fieldProps,
     error
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPickerLabel, null, label, isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, {
+  }) => jsx(Fragment, null, jsx("div", {
+    css: colorPickerWrapper
+  }, jsx("label", {
+    css: colorPickerLabel
+  }, label, isRequired && jsx("span", {
+    css: requiredIndicator,
     "aria-hidden": "true"
-  }, "*")), /*#__PURE__*/React.createElement(ColorPicker, {
+  }, "*")), jsx(ColorPicker, {
     name: name,
     title: label,
     currentColor: fieldProps.value,
     colorPalette: colorPalette,
     onChange: fieldProps.onChange,
     onFieldChange: onFieldChange
-  })), error && /*#__PURE__*/React.createElement(FieldMessages, {
+  })), error && jsx(FieldMessages, {
     error: error,
     description: ""
   })));

package/dist/es2019/ui/ConfigPanel/Fields/DateRange.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { Fragment, useState, useEffect, useMemo } from 'react';
+
+/** @jsx jsx */
+import { Fragment, useState, useEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { Field } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { DatePicker } from '@atlaskit/datetime-picker';
@@ -9,15 +11,15 @@ import TextField from '@atlaskit/textfield';
 import { messages } from '../messages';
 import FieldMessages from '../FieldMessages';
 import { validate, validateRequired } from '../utils';
-const HorizontalFields = styled.div`
+const horizontalFields = css`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
-const HorizontalFieldWrapper = styled.div`
+const horizontalFieldWrapper = css`
   flex-basis: 47%;
 `;
-const Hidden = styled.div`
+const hidden = css`
   display: none;
 `;
 
@@ -34,9 +36,10 @@ const DateField = ({
   onFieldChange,
   intl,
   isRequired
-}) => /*#__PURE__*/React.createElement(HorizontalFieldWrapper, {
+}) => jsx("div", {
+  css: horizontalFieldWrapper,
   key: fieldName
-}, /*#__PURE__*/React.createElement(Field, {
+}, jsx(Field, {
   name: `${scope}.${fieldName}`,
   label: intl.formatMessage(messages[fieldName]),
   defaultValue: getFromDefaultValue(parentField, fieldName),
@@ -49,13 +52,13 @@ const DateField = ({
 }, ({
   fieldProps,
   error
-}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+}) => jsx(Fragment, null, jsx(DatePicker, _extends({}, fieldProps, {
   onChange: date => {
     fieldProps.onChange(date);
     onFieldChange(parentField.name, true);
   },
   locale: intl.locale
-})), /*#__PURE__*/React.createElement(FieldMessages, {
+})), jsx(FieldMessages, {
   error: error
 }))));
 
@@ -79,14 +82,16 @@ const DateRange = function ({
     // get the most up to date value after the form has been rendered
     onFieldChange(name, true);
   }, [currentValue, onFieldChange, name]);
-  const element = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Field, {
+  const element = jsx(Fragment, null, jsx("div", {
+    css: hidden
+  }, jsx(Field, {
     name: `${name}.type`,
     defaultValue: 'date-range'
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+  }) => jsx(TextField, _extends({}, fieldProps, {
     type: "hidden"
-  })))), /*#__PURE__*/React.createElement(Field, {
+  })))), jsx(Field, {
     name: `${name}.value`,
     label: field.label,
     defaultValue: currentValue,
@@ -95,36 +100,40 @@ const DateRange = function ({
   }, ({
     fieldProps,
     error
-  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
+  }) => jsx(Fragment, null, jsx(RadioGroup, _extends({}, fieldProps, {
     options: items,
     onChange: event => {
       fieldProps.onChange(event.target.value);
       setCurrentValue(event.target.value);
     }
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     error: error
-  }))), currentValue !== 'custom' ? /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Field, {
+  }))), currentValue !== 'custom' ? jsx("div", {
+    css: hidden
+  }, jsx(Field, {
     name: `${name}.from`,
     defaultValue: currentValue
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+  }) => jsx(TextField, _extends({}, fieldProps, {
     type: "hidden"
-  })))) : /*#__PURE__*/React.createElement(HorizontalFields, null, /*#__PURE__*/React.createElement(DateField, {
+  })))) : jsx("div", {
+    css: horizontalFields
+  }, jsx(DateField, {
     scope: name,
     parentField: field,
     fieldName: "from",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  }), /*#__PURE__*/React.createElement(DateField, {
+  }), jsx(DateField, {
     scope: name,
     parentField: field,
     fieldName: "to",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     description: field.description
   }));
   return element;

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -1,22 +1,23 @@
+/** @jsx jsx */
 import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { N40 } from '@atlaskit/theme/colors';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
-export const ExpandContainer = styled.div`
+export const expandContainer = css`
   border-bottom: 1px solid ${N40};
 `;
-export const ExpandControl = styled.div`
+export const expandControl = css`
   display: flex;
   height: ${gridSize() * 6}px;
   justify-content: center;
   padding-right: ${gridSize()}px;
 `;
-const ChevronContainer = styled.div`
+const chevronContainer = css`
   display: flex;
   align-items: center;
 
@@ -25,19 +26,17 @@ const ChevronContainer = styled.div`
     height: ${gridSize() * 3}px;
   }
 `;
-const LabelContainer = styled.div`
+const labelContainer = css`
   width: 100%;
   align-items: center;
   display: flex;
   font-weight: 500;
 `;
-const ExpandContentContainer = styled.div`
-  display: ${({
-  isHidden
-}) => isHidden ? 'none' : 'block'};
-  margin-top: -${gridSize}px;
+
+const expandContentContainer = isHidden => css`
+  display: ${isHidden ? 'none' : 'block'};
+  margin-top: -${gridSize()}px;
 `;
-ExpandContentContainer.displayName = 'ExpandContentContainer';
 
 function Expand({
   field,
@@ -46,18 +45,27 @@ function Expand({
   intl
 }) {
   const [expanded, setExpanded] = useState(isExpanded);
-  return /*#__PURE__*/React.createElement(ExpandContainer, null, /*#__PURE__*/React.createElement(ExpandControl, null, /*#__PURE__*/React.createElement(LabelContainer, null, field.label), /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: expandContainer
+  }, jsx("div", {
+    css: expandControl
+  }, jsx("div", {
+    css: labelContainer
+  }, field.label), jsx("div", {
+    css: chevronContainer
+  }, jsx(Button, {
     onClick: () => {
       setExpanded(!expanded);
     },
     testId: "form-expand-toggle",
-    iconBefore: expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    iconBefore: expanded ? jsx(ChevronDownIcon, {
       label: intl.formatMessage(messages.collapse)
-    }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    }) : jsx(ChevronRightIcon, {
       label: intl.formatMessage(messages.expand)
     })
-  }))), /*#__PURE__*/React.createElement(ExpandContentContainer, {
-    isHidden: !expanded
+  }))), jsx("div", {
+    "data-testid": "expand-content-container",
+    css: expandContentContainer(!expanded)
   }, children));
 }
 

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -12,7 +14,7 @@ import FormContent from '../FormContent';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-const ActionsWrapper = styled.div`
+const actionsWrapper = css`
   border-top: 1px solid ${N40A};
   margin-top: ${gridSize() * 2}px;
   padding-top: ${gridSize() * 2}px;
@@ -167,7 +169,7 @@ class FieldsetField extends React.Component {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isAdding ? /*#__PURE__*/React.createElement(Select, {
+      return jsx(React.Fragment, null, isAdding ? jsx(Select, {
         testId: "field-picker",
         defaultMenuIsOpen: true,
         autoFocus: true,
@@ -178,10 +180,10 @@ class FieldsetField extends React.Component {
             this.onSelectItem(option);
           }
         }
-      }) : /*#__PURE__*/React.createElement(Button, {
+      }) : jsx(Button, {
         testId: "add-more",
         appearance: "subtle",
-        iconBefore: /*#__PURE__*/React.createElement(AddCircleIcon, {
+        iconBefore: jsx(AddCircleIcon, {
           size: "small",
           label: intl.formatMessage(messages.addField)
         }),
@@ -218,9 +220,9 @@ class FieldsetField extends React.Component {
       visibleFields
     } = this.state;
     const children = this.renderActions();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, error && /*#__PURE__*/React.createElement(FieldsetError, {
+    return jsx(Fragment, null, error && jsx(FieldsetError, {
       message: error
-    }), /*#__PURE__*/React.createElement("div", null, options.showTitle && /*#__PURE__*/React.createElement("h5", null, label), /*#__PURE__*/React.createElement(FormContent, {
+    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
       fields: selectedFields,
       parentName: name,
       extensionManifest: extensionManifest,
@@ -229,8 +231,9 @@ class FieldsetField extends React.Component {
       onClickRemove: this.onClickRemove,
       onFieldChange: onFieldChange,
       firstVisibleFieldName: firstVisibleFieldName
-    }), children && /*#__PURE__*/React.createElement(ActionsWrapper, {
-      testId: "fieldset-actions"
+    }), children && jsx("div", {
+      css: actionsWrapper,
+      "data-testId": "fieldset-actions"
     }, children)));
   }
 
@@ -239,12 +242,14 @@ class FieldsetField extends React.Component {
 function FieldsetError({
   message
 }) {
-  return /*#__PURE__*/React.createElement(SectionMessageWrapper, null, /*#__PURE__*/React.createElement(SectionMessage, {
+  return jsx("div", {
+    css: sectionMessageWrapper
+  }, jsx(SectionMessage, {
     appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, message)));
+  }, jsx("p", null, message)));
 }
 
-const SectionMessageWrapper = styled.div`
+const sectionMessageWrapper = css`
   margin-bottom: 24px;
 `;
 export default injectIntl(FieldsetField);

package/dist/es2019/ui/ConfigPanel/Fields/SelectItem.js

@@ -1,8 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
-import styled from 'styled-components';
-const ItemWrapper = styled.div`
+const itemWrapper = css`
   display: flex;
   align-items: center;
 
@@ -12,15 +12,13 @@ const ItemWrapper = styled.div`
     color: currentColor;
   }
 `;
-const IconWrapper = styled.span`
-  ${({
-  context
-}) => context === 'menu' && `
-    align-self: flex-start;
-    margin-top: 3px;
-  `}
+const iconWrapper = css`
   line-height: 1;
 `;
+const iconWrapperMenu = css`
+  align-self: flex-start;
+  margin-top: 3px;
+`;
 
 const getIconSize = (context, description) => {
   if (context === 'value' || !description) {
@@ -37,15 +35,17 @@ export const formatOptionLabel = ({
 }, {
   context
 }) => {
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, {
-    context: context
-  }, typeof icon === 'string' ? /*#__PURE__*/React.createElement(Avatar, {
+  return jsx("div", {
+    css: itemWrapper
+  }, jsx("span", {
+    css: [iconWrapper, context === 'menu' && iconWrapperMenu]
+  }, typeof icon === 'string' ? jsx(Avatar, {
     src: icon,
     size: getIconSize(context, description),
     appearance: "square"
-  }) : icon), /*#__PURE__*/React.createElement("div", {
+  }) : icon), jsx("div", {
     style: {
       paddingLeft: icon ? gridSize() : 0
     }
-  }, /*#__PURE__*/React.createElement("p", null, label, description && context !== 'value' && /*#__PURE__*/React.createElement("small", null, description))));
+  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
 };

package/dist/es2019/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-export const RequiredIndicator = styled.span`
+export const requiredIndicator = css`
   color: ${R500};
 `;

package/dist/es2019/ui/ConfigPanel/LoadingState.js

@@ -1,13 +1,15 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-const SpinnerWrapper = styled.div`
+const spinnerWrapper = css`
   display: flex;
   justify-content: center;
   margin-top: 64px;
 `;
 
-const LoadingState = () => /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
+const LoadingState = () => jsx("div", {
+  css: spinnerWrapper
+}, jsx(Spinner, {
   size: "small"
 }));