@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -1,21 +1,20 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
-import ContentStyles from '../../ContentStyles';
-import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { createEditorContentStyle } from '../../ContentStyles';
+import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const TOTAL_PADDING = akEditorGutterPadding * 2;
-export const FullPageEditorWrapper = styled.div`
+export const fullPageEditorWrapper = css`
   min-width: 340px;
   height: 100%;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 `;
-FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
-export const ScrollContainer = styled(ContentStyles)`
+const scrollStyles = css`
   flex-grow: 1;
   height: 100%;
   overflow-y: scroll;
@@ -25,29 +24,66 @@ export const ScrollContainer = styled(ContentStyles)`
   scroll-behavior: smooth;
   ${scrollbarStyles};
 `;
-ScrollContainer.displayName = 'ScrollContainer';
-export const ContentArea = styled.div`
+export const ScrollContainer = createEditorContentStyle(scrollStyles);
+ScrollContainer.displayName = 'ScrollContainer'; // transition used to match scrollbar with config panel opening animation
+// only use animation when opening as there is a bug with floating toolbars.
+
+export const positionedOverEditorStyle = css`
+  padding: 0 ${akEditorContextPanelWidth}px;
+  transition: padding 500ms ${akEditorSwoopCubicBezier};
+`;
+export const contentArea = css`
   display: flex;
   flex-direction: row;
   height: calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT});
   box-sizing: border-box;
   margin: 0;
-  padding: 0
-    ${p => p.positionedOverEditor ? akEditorContextPanelWidth : 0}px;
-
-  // transition used to match scrollbar with config panel opening animation
-  // only use animation when opening as there is a bug with floating toolbars.
-  transition: padding ${p => p.positionedOverEditor ? 500 : 0}ms
-    ${akEditorSwoopCubicBezier};
+  padding: 0;
+  transition: padding 0ms ${akEditorSwoopCubicBezier};
 `;
-ContentArea.displayName = 'ContentArea';
-export const SidebarArea = styled.div`
+export const sidebarArea = css`
   height: 100%;
   box-sizing: border-box;
   align-self: flex-end;
+`; // initially hide until we have a containerWidth and can properly size them,
+// otherwise they can cause the editor width to extend which is non-recoverable
+
+export const editorContentAreaHideContainer = css`
+  .fabric-editor--full-width-mode {
+    .pm-table-container,
+    .code-block,
+    .extension-container {
+      display: none;
+    }
+  }
+`;
+/* Prevent horizontal scroll on page in full width mode */
+
+const editorContentAreaContainerStyle = containerWidth => css`
+  .fabric-editor--full-width-mode {
+    .pm-table-container,
+    .code-block,
+    .extension-container {
+      max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
+    }
+
+    [data-layout-section] {
+      max-width: ${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px;
+    }
+  }
 `;
-SidebarArea.displayName = 'SidebarArea';
-export const EditorContentArea = styled.div`
+
+export const editorContentAreaStyle = ({
+  layoutMaxWidth,
+  fullWidthMode,
+  containerWidth
+}) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+
+const editorContentAreaWithLayoutWith = layoutMaxWidth => css`
+  max-width: ${layoutMaxWidth + TOTAL_PADDING}px;
+`;
+
+const editorContentArea = css`
   line-height: 24px;
   padding-top: 50px;
   padding-bottom: 55px;
@@ -59,12 +95,8 @@ export const EditorContentArea = styled.div`
   flex-direction: column;
   flex-grow: 1;
 
-  max-width: ${({
-  theme,
-  fullWidthMode
-}) => (fullWidthMode ? akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING}px;
+  max-width: ${akEditorFullWidthLayoutWidth + TOTAL_PADDING}px;
   transition: max-width ${SWOOP_ANIMATION};
-
   & .ProseMirror {
     flex-grow: 1;
     box-sizing: border-box;
@@ -93,7 +125,7 @@ export const EditorContentArea = styled.div`
     }
   }
 
-  ${deprecatedTableFullPageEditorStyles};
+  ${tableFullPageEditorStyles};
 
   .fabric-editor--full-width-mode {
     /* Full Width Mode styles for ignoring breakout sizes */
@@ -107,40 +139,9 @@ export const EditorContentArea = styled.div`
       margin-left: unset !important;
       transform: none !important;
     }
-
-    /* Prevent horizontal scroll on page in full width mode */
-    ${({
-  containerWidth
-}) => {
-  if (!containerWidth) {
-    // initially hide until we have a containerWidth and can properly size them,
-    // otherwise they can cause the editor width to extend which is non-recoverable
-    return `
-          .pm-table-container,
-          .code-block,
-          .extension-container {
-            display: none;
-          }
-        `;
-  }
-
-  return `
-        .pm-table-container,
-        .code-block,
-        .extension-container {
-          max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
-        }
-
-        [data-layout-section] {
-          max-width: ${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px;
-        }
-      `;
-}}
   }
 `;
-EditorContentArea.displayName = 'EditorContentArea';
-export const EditorContentGutter = styled.div`
+export const editorContentGutterStyle = css`
   box-sizing: border-box;
   padding: 0 ${akEditorGutterPadding}px;
-`;
-EditorContentGutter.displayName = 'EditorContentGutter';
+`;

package/dist/es2019/ui/Appearance/FullPage/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   toolbarLabel: {
     id: 'fabric.editor.toolbarLabel',

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -1,12 +1,13 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { mobileDimensionsPluginKey } from '../../plugins/mobile-dimensions/plugin-factory';
 import WithPluginState from '../WithPluginState';
 import WithFlash from '../WithFlash';
-import ContentStyles from '../ContentStyles';
+import { createEditorContentStyle } from '../ContentStyles';
 import { ClickAreaMobile as ClickArea } from '../Addon';
-const MobileEditor = styled.div`
+const mobileEditor = css`
   min-height: 30px;
   width: 100%;
   max-width: inherit;
@@ -20,8 +21,7 @@ const MobileEditor = styled.div`
     margin: 0;
   }
 `;
-MobileEditor.displayName = 'MobileEditor';
-const ContentArea = styled(ContentStyles)``;
+const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export function MobileAppearance({
   editorView,
@@ -63,21 +63,20 @@ export function MobileAppearance({
       }
     }
 
-    return /*#__PURE__*/React.createElement(WithFlash, {
+    return jsx(WithFlash, {
       animate: maxContentSizeReached
-    }, /*#__PURE__*/React.createElement(MobileEditor, {
-      isMaxContentSizeReached: maxContentSizeReached,
-      maxHeight: maxHeight
-    }, /*#__PURE__*/React.createElement(ClickArea, {
+    }, jsx("div", {
+      css: mobileEditor
+    }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
       isExpanded: currentIsExpanded
-    }, /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
+    }, jsx(ContentArea, null, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, maxHeight, editorView, persistScrollGutter]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
+  }, [children, editorView, persistScrollGutter]);
+  return jsx(WithPluginState, {
     plugins: {
       maxContentSize: maxContentSizePluginKey,
       mobileDimensions: mobileDimensionsPluginKey

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

@@ -1,7 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { inputStyle } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { messages } from './messages';
 
@@ -32,8 +35,9 @@ class ChromeCollapsed extends PureComponent {
 
   render() {
     const placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
-    return /*#__PURE__*/React.createElement(Input, {
-      innerRef: this.handleInputRef,
+    return jsx("input", {
+      css: inputStyle,
+      ref: this.handleInputRef,
       onFocus: this.focusHandler,
       placeholder: placeholder
     });

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

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
-export const Input = styled.input`
+export const inputStyle = css`
   /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */
   input& {
     background-color: white;

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

@@ -1,9 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
-import { Button, ButtonWrapper } from './styles';
+import { buttonStyle, buttonWrapperStyle } from './styles';
 import Tooltip from '@atlaskit/tooltip';
 
 class Color extends PureComponent {
@@ -35,9 +38,12 @@ class Color extends PureComponent {
       borderColor,
       checkMarkColor = N0
     } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: label
-    }, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    }, jsx("span", {
+      css: buttonWrapperStyle
+    }, jsx("button", {
+      css: buttonStyle,
       "aria-label": label,
       role: "radio",
       "aria-checked": isSelected,
@@ -50,7 +56,7 @@ class Color extends PureComponent {
         border: `1px solid ${borderColor}`
       },
       autoFocus: autoFocus
-    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    }, isSelected && jsx(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
     }))));

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;
@@ -40,7 +42,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 +55,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 +77,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 +91,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 +116,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