@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
-export const Button = styled.button`
+export const buttonStyle = css`
   height: 26px;
   width: 26px;
   background: ${N900};
@@ -10,7 +10,7 @@ export const Button = styled.button`
   cursor: pointer;
   display: block;
 `;
-export const ButtonWrapper = styled.span`
+export const buttonWrapperStyle = css`
   border: 1px solid transparent;
   margin: 1px;
   font-size: 0;

package/dist/es2019/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
 import { DEFAULT_BORDER_COLOR } from './common';
-import { darkPanelColors } from '@atlaskit/editor-common/styles';
+import { darkPanelColors } from '@atlaskit/editor-common/panel';
 export const panelBackgroundPalette = [{
   label: 'White',
   value: colors.N0

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

@@ -1,7 +1,9 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import Color from './Color';
-import { ColorPaletteWrapper } from './styles';
+import { colorPaletteWrapper } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
 
@@ -36,7 +38,8 @@ const ColorPalette = props => {
       return resultArray;
     }, []);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map((row, rowIdx) => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+  return jsx(React.Fragment, null, colorsPerRow.map((row, rowIdx) => jsx("div", {
+    css: colorPaletteWrapper,
     className: className,
     key: `row-first-color-${row[0].value}`,
     role: "radiogroup"
@@ -45,7 +48,7 @@ const ColorPalette = props => {
     label,
     border,
     message
-  }, colorIdx) => /*#__PURE__*/React.createElement(Color, {
+  }, colorIdx) => jsx(Color, {
     key: value,
     value: value,
     borderColor: border,

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/ErrorMessage/ErrorImage.js

@@ -1,62 +1,65 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-const ImageContainer = styled.div`
+const imageContainer = css`
   margin: 0 auto ${gridSize() * 3}px;
   height: 80px;
 `;
 
-const ErrorImage = () => /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+const ErrorImage = () => 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/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
-const ToggleFieldWrapper = styled.div`
+import { requiredIndicator } from './common/RequiredIndicator';
+const toggleFieldWrapper = css`
   display: flex;
 `;
-const ToggleLabel = styled.label`
+const toggleLabel = css`
   display: flex;
   padding: 3px 3px 3px 0px;
   flex-grow: 1;
@@ -25,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({
@@ -40,7 +48,7 @@ function Checkbox({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -53,11 +61,11 @@ function Checkbox({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AKCheckbox, _extends({}, restFieldProps, {
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
       label: label,
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -75,7 +83,7 @@ function Toggle({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -89,15 +97,19 @@ function Toggle({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    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: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    }))), /*#__PURE__*/React.createElement(FieldMessages, {
+    }))), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -110,14 +122,14 @@ export default function Boolean({
   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/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;