@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @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';
@@ -16,9 +17,9 @@ 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
 
-var ColorPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
+var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
-var ColorPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
+var colorPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;
@@ -68,13 +69,15 @@ var ColorPickerButton = function 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,
@@ -84,10 +87,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
 
   var 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/esm/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -2,63 +2,66 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-var ImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), gridSize() * 3);
+var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), gridSize() * 3);
 
 var ErrorImage = function ErrorImage() {
-  return /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+  return jsx("div", {
+    css: imageContainer
+  }, jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 163.28 218",
     height: "80"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }, jsx("defs", null, jsx("linearGradient", {
     id: "linear-gradient",
     x1: "133.86",
     x2: "-2.79",
     y1: "136.43",
     y2: "200.15",
     gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
+  }, jsx("stop", {
     offset: "0",
     stopColor: "#ffd740"
-  }), /*#__PURE__*/React.createElement("stop", {
+  }), jsx("stop", {
     offset: "1",
     stopColor: "#ffab00"
-  })), /*#__PURE__*/React.createElement("clipPath", {
+  })), jsx("clipPath", {
     id: "clip-path"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     id: "_Polygon_",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  })), /*#__PURE__*/React.createElement("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), /*#__PURE__*/React.createElement("g", {
+  })), jsx("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), jsx("g", {
     id: "Layer_2",
     "data-name": "Layer 2"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, jsx("g", {
     id: "Software"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     id: "_Polygon_2",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
     className: "cls-2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "#ffc400",
     d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "#ffab00",
     d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "none",
     stroke: "#344563",
     strokeLinecap: "round",
     strokeMiterlimit: "10",
     strokeWidth: "2",
     d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
     className: "cls-6"
   })))));

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

@@ -6,16 +6,17 @@ var _excluded = ["value"],
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
 import AKToggle from '@atlaskit/toggle';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
-import { RequiredIndicator } from './common/RequiredIndicator';
-var ToggleFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var ToggleLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 3px 3px 3px 0px;\n  flex-grow: 1;\n"])));
+import { requiredIndicator } from './common/RequiredIndicator';
+var toggleFieldWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var toggleLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 3px 3px 3px 0px;\n  flex-grow: 1;\n"])));
 
 function _validate(value, isRequired) {
   if (isRequired && !value) {
@@ -26,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(_ref) {
@@ -40,7 +47,7 @@ function Checkbox(_ref) {
       isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
       _field$defaultValue = field.defaultValue,
       defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: function validate(value) {
@@ -54,13 +61,13 @@ function Checkbox(_ref) {
     var isChecked = fieldProps.value,
         restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
 
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AKCheckbox, _extends({}, restFieldProps, {
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
       label: label,
       onChange: function onChange(event) {
         return handleOnChange(fieldProps.onChange, onFieldChange, event);
       },
       isChecked: isChecked
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -77,7 +84,7 @@ function Toggle(_ref3) {
       isRequired = _field$isRequired2 === void 0 ? false : _field$isRequired2,
       _field$defaultValue2 = field.defaultValue,
       defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: function validate(value) {
@@ -92,17 +99,21 @@ function Toggle(_ref3) {
         isChecked = fieldProps.value,
         restFieldProps = _objectWithoutProperties(fieldProps, _excluded2);
 
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ToggleFieldWrapper, null, /*#__PURE__*/React.createElement(ToggleLabel, {
+    return jsx(Fragment, null, jsx("div", {
+      css: toggleFieldWrapper
+    }, jsx("label", {
+      css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+    }, label, isRequired ? jsx("span", {
+      css: requiredIndicator,
       "aria-hidden": "true"
-    }, "*") : null), /*#__PURE__*/React.createElement(AKToggle, _extends({}, restFieldProps, {
+    }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: function onChange(event) {
         return handleOnChange(fieldProps.onChange, onFieldChange, event);
       },
       isChecked: isChecked
-    }))), /*#__PURE__*/React.createElement(FieldMessages, {
+    }))), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -115,14 +126,14 @@ export default function Boolean(_ref5) {
       onFieldChange = _ref5.onFieldChange;
 
   if (field.style === 'toggle') {
-    return /*#__PURE__*/React.createElement(Toggle, {
+    return jsx(Toggle, {
       name: name,
       field: field,
       onFieldChange: onFieldChange
     });
   }
 
-  return /*#__PURE__*/React.createElement(Checkbox, {
+  return jsx(Checkbox, {
     name: name,
     field: field,
     onFieldChange: onFieldChange

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

@@ -6,8 +6,9 @@ var _excluded = ["onChange", "value"];
 
 var _templateObject;
 
-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';
@@ -19,7 +20,7 @@ function _validate(value, isRequired) {
   }
 }
 
-var RequiredIndicator = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: #bf2600;\n"])));
+var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: #bf2600;\n"])));
 
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,
@@ -46,7 +47,7 @@ function CheckboxGroupInner(_ref) {
     onFieldChange();
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AKFieldset, {
+  return jsx(Fragment, null, jsx(AKFieldset, {
     legend: label
   }, options.map(function (_ref2, i) {
     var optionLabel = _ref2.label,
@@ -57,7 +58,7 @@ function CheckboxGroupInner(_ref) {
       _onChange(optionValue, event.target.checked);
     };
 
-    return /*#__PURE__*/React.createElement(AKCheckbox, _extends({
+    return jsx(AKCheckbox, _extends({
       key: i
     }, restFieldProps, {
       isRequired: false,
@@ -65,7 +66,7 @@ function CheckboxGroupInner(_ref) {
       isChecked: isChecked,
       onChange: onOptionChange
     }));
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     error: error,
     description: description
   }));
@@ -81,15 +82,16 @@ export default function CheckboxGroup(_ref3) {
       _field$isRequired = field.isRequired,
       isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
       options = field.items;
-  var label = /*#__PURE__*/React.createElement(React.Fragment, null, labelBase, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+  var label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
+    css: requiredIndicator,
     "aria-hidden": "true"
-  }, " *") : null);
+  }, ' ', "*") : null);
 
   var _onFieldChange = useCallback(function () {
     onFieldChange(name, true);
   }, [name, onFieldChange]);
 
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -97,7 +99,7 @@ export default function CheckboxGroup(_ref3) {
       return _validate(value, isRequired);
     }
   }, function (props) {
-    return /*#__PURE__*/React.createElement(CheckboxGroupInner, _extends({
+    return jsx(CheckboxGroupInner, _extends({
       label: label,
       description: description,
       options: options,

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

@@ -7,14 +7,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-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 as _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';
@@ -111,8 +112,8 @@ var colorPalette = [{
     border: DEFAULT_BORDER_COLOR
   });
 });
-var ColorPickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * gridSize(), gridSize());
-var ColorPickerLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), headingSizes.h400.size);
+var colorPickerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * gridSize(), gridSize());
+var colorPickerLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), headingSizes.h400.size);
 
 var ColorPicker = function ColorPicker(props) {
   var name = props.name,
@@ -133,7 +134,7 @@ var ColorPicker = function ColorPicker(props) {
     onFieldChange(name, currentColor !== colorValue);
   };
 
-  return /*#__PURE__*/React.createElement(ColorPickerButton, {
+  return jsx(ColorPickerButton, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
@@ -155,7 +156,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
   var label = field.label,
       defaultValue = field.defaultValue,
       isRequired = field.isRequired;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -165,16 +166,21 @@ var ColorPickerField = function ColorPickerField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPickerLabel, null, label, isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, {
+    return 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/esm/ui/ConfigPanel/Fields/DateRange.js

@@ -10,9 +10,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-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';
@@ -20,9 +21,9 @@ import TextField from '@atlaskit/textfield';
 import { messages } from '../messages';
 import FieldMessages from '../FieldMessages';
 import { validate as _validate, validateRequired } from '../utils';
-var HorizontalFields = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-var HorizontalFieldWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-basis: 47%;\n"])));
-var Hidden = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
+var horizontalFields = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var horizontalFieldWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-basis: 47%;\n"])));
+var hidden = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
 
 var getFromDefaultValue = function getFromDefaultValue(field, attribute) {
   if (field.defaultValue) {
@@ -37,9 +38,10 @@ var DateField = function DateField(_ref) {
       onFieldChange = _ref.onFieldChange,
       intl = _ref.intl,
       isRequired = _ref.isRequired;
-  return /*#__PURE__*/React.createElement(HorizontalFieldWrapper, {
+  return jsx("div", {
+    css: horizontalFieldWrapper,
     key: fieldName
-  }, /*#__PURE__*/React.createElement(Field, {
+  }, jsx(Field, {
     name: "".concat(scope, ".").concat(fieldName),
     label: intl.formatMessage(messages[fieldName]),
     defaultValue: getFromDefaultValue(parentField, fieldName),
@@ -52,13 +54,13 @@ var DateField = function DateField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+    return jsx(Fragment, null, jsx(DatePicker, _extends({}, fieldProps, {
       onChange: function onChange(date) {
         fieldProps.onChange(date);
         onFieldChange(parentField.name, true);
       },
       locale: intl.locale
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error
     }));
   }));
@@ -90,15 +92,17 @@ var DateRange = function DateRange(_ref3) {
     // get the most up to date value after the form has been rendered
     onFieldChange(name, true);
   }, [currentValue, onFieldChange, name]);
-  var element = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Field, {
+  var element = jsx(Fragment, null, jsx("div", {
+    css: hidden
+  }, jsx(Field, {
     name: "".concat(name, ".type"),
     defaultValue: 'date-range'
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps;
-    return /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    return jsx(TextField, _extends({}, fieldProps, {
       type: "hidden"
     }));
-  })), /*#__PURE__*/React.createElement(Field, {
+  })), jsx(Field, {
     name: "".concat(name, ".value"),
     label: field.label,
     defaultValue: currentValue,
@@ -109,38 +113,42 @@ var DateRange = function DateRange(_ref3) {
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
         error = _ref5.error;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
+    return jsx(Fragment, null, jsx(RadioGroup, _extends({}, fieldProps, {
       options: items,
       onChange: function 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: "".concat(name, ".from"),
     defaultValue: currentValue
   }, function (_ref6) {
     var fieldProps = _ref6.fieldProps;
-    return /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    return 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/esm/ui/ConfigPanel/Fields/Expand.js

@@ -3,49 +3,58 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+/** @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 var ExpandContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), N40);
-export var ExpandControl = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
-var ChevronContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
-var LabelContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
-var ExpandContentContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-top: -", "px;\n"])), function (_ref) {
-  var isHidden = _ref.isHidden;
-  return isHidden ? 'none' : 'block';
-}, gridSize);
-ExpandContentContainer.displayName = 'ExpandContentContainer';
+export var expandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), N40);
+export var expandControl = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
+var chevronContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
+var labelContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 
-function Expand(_ref2) {
-  var field = _ref2.field,
-      children = _ref2.children,
-      _ref2$isExpanded = _ref2.isExpanded,
-      isExpanded = _ref2$isExpanded === void 0 ? false : _ref2$isExpanded,
-      intl = _ref2.intl;
+var expandContentContainer = function expandContentContainer(isHidden) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-top: -", "px;\n"])), isHidden ? 'none' : 'block', gridSize());
+};
+
+function Expand(_ref) {
+  var field = _ref.field,
+      children = _ref.children,
+      _ref$isExpanded = _ref.isExpanded,
+      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+      intl = _ref.intl;
 
   var _useState = useState(isExpanded),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  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: function 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));
 }