@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/LinkSearch/LinkSearchList.js

@@ -1,17 +1,17 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
 import LinkSearchListItem from './LinkSearchListItem';
-const ListContainer = styled.div`
+const listContainer = css`
   padding-top: 0;
 `;
-const SpinnerContainer = styled.div`
+const spinnerContainer = css`
   text-align: center;
   min-height: 80px;
   margin-top: 30px;
 `;
-export const List = styled.ul`
+export const linkSearchList = css`
   padding: 0;
   list-style: none;
 `;
@@ -33,11 +33,12 @@ export default class LinkSearchList extends PureComponent {
     let loadingContent;
 
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement(List, {
+      itemsContent = jsx("ul", {
+        css: linkSearchList,
         id: id,
         role: role,
         "aria-controls": ariaControls
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -51,12 +52,16 @@ export default class LinkSearchList extends PureComponent {
     }
 
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+      loadingContent = jsx("div", {
+        css: spinnerContainer
+      }, jsx(Spinner, {
         size: "medium"
       }));
     }
 
-    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+    return jsx("div", {
+      css: listContainer
+    }, itemsContent, loadingContent);
   }
 
 }

package/dist/es2019/ui/LinkSearch/LinkSearchListItem.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
@@ -9,29 +11,32 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 import { injectIntl } from 'react-intl-next';
-export const Container = styled.li`
-  background-color: ${props => props.selected ? N20 : 'transparent'};
+export const container = css`
+  background-color: transparent;
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
   margin-top: 0;
 `;
-const NameWrapper = styled.span`
+export const containerSelected = css`
+  background-color: ${N20};
+`;
+const nameWrapper = css`
   overflow: hidden;
 `;
-export const Name = styled.div`
+export const nameStyle = css`
   color: ${N800};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 20px;
 `;
-export const ContainerName = styled.div`
+export const containerName = css`
   color: ${N300};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;
-const Icon = styled.span`
+const iconStyle = css`
   min-width: 16px;
   margin-top: 3px;
   margin-right: 12px;
@@ -90,11 +95,15 @@ class LinkSearchListItem extends React.PureComponent {
     } = this.props;
 
     if (icon) {
-      return /*#__PURE__*/React.createElement(Icon, null, icon);
+      return jsx("span", {
+        css: iconStyle
+      }, icon);
     }
 
     if (iconUrl) {
-      return /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement("img", {
+      return jsx("span", {
+        css: iconStyle
+      }, jsx("img", {
         src: iconUrl,
         alt: getCorrectAltByIconUrl(iconUrl, intl)
       }));
@@ -109,7 +118,7 @@ class LinkSearchListItem extends React.PureComponent {
       intl
     } = this.props;
     const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
-    return date && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0 \u2022", /*#__PURE__*/React.createElement("span", {
+    return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
       className: "link-search-timestamp",
       "data-test-id": "link-search-timestamp"
     }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -122,17 +131,24 @@ class LinkSearchListItem extends React.PureComponent {
       id,
       role
     } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
+    return jsx("li", {
+      css: [container, selected && containerSelected],
       role: role,
       id: id,
       "aria-selected": selected,
       "data-testid": "link-search-list-item",
-      selected: selected,
       onMouseMove: this.handleMouseMove,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onClick: this.handleSelect
-    }, this.renderIcon(), /*#__PURE__*/React.createElement(NameWrapper, null, /*#__PURE__*/React.createElement(Name, null, item.name), /*#__PURE__*/React.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+    }, this.renderIcon(), jsx("span", {
+      css: nameWrapper
+    }, jsx("div", {
+      css: nameStyle
+    }, item.name), jsx("div", {
+      "data-testid": "link-search-list-item-container",
+      css: containerName
+    }, item.container, this.renderTimeStamp())));
   }
 
 }

package/dist/es2019/ui/LinkSearch/ToolbarComponents.js

@@ -1,27 +1,22 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const RECENT_SEARCH_WIDTH_IN_PX = 420;
 export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
-export const InputWrapper = `
+export const inputWrapper = css`
   display: flex;
   line-height: 0;
   padding: 5px 0;
   align-items: center;
 `;
-export const UrlInputWrapper = styled.div`
-  ${InputWrapper}
-`;
-export const Container = styled.div`
-  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
+export const container = css`
   display: flex;
   flex-direction: column;
   overflow: auto;
   padding: 0;
 
-  ${({
-  provider
-}) => css`
-      width: ${provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
-    `};
+  width: ${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
   line-height: initial;
+`;
+export const containerWithProvider = css`
+  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
 `;

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

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 import { browser } from '@atlaskit/editor-common/utils';
 const KeyZCode = 90;
 const KeyYCode = 89;
@@ -119,7 +121,8 @@ export default class PanelTextInput extends PureComponent {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/React.createElement(Input, {
+    return jsx("input", {
+      css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
       role: role,
       "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
       "aria-expanded": ariaExpanded,
@@ -134,8 +137,7 @@ export default class PanelTextInput extends PureComponent {
       onKeyDown: this.handleKeydown,
       onMouseDown: this.onMouseDown,
       onBlur: this.onBlur,
-      innerRef: this.handleRef,
-      width: width,
+      ref: this.handleRef,
       maxLength: maxLength,
       "aria-label": ariaLabel
     });

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

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N400, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 
-export const Input = styled.input`
+export const panelTextInput = css`
   input& {
     background: transparent;
     border: 0;
@@ -13,7 +13,6 @@ export const Input = styled.input`
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
     padding: 0;
-    ${props => props.width ? `width: ${props.width}px` : ''};
     min-width: 145px;
 
     /* Hides IE10+ built-in [x] clear input button */
@@ -30,4 +29,9 @@ export const Input = styled.input`
       opacity: 0.5;
     }
   }
+`;
+export const panelTextInputWithCustomWidth = width => css`
+  input& {
+    width: ${width}px;
+  }
 `;

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

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ACTION_SUBJECT } from '../../plugins/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
-const PluginsComponentsWrapper = styled.div`
+const pluginsComponentsWrapper = css`
   display: flex;
 `;
 export default class PluginSlot extends React.Component {
@@ -89,10 +91,12 @@ export default class PluginSlot extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.PLUGIN_SLOT,
       fallbackComponent: null
-    }, /*#__PURE__*/React.createElement(PluginsComponentsWrapper, null, items.map((component, key) => {
+    }, jsx("div", {
+      css: pluginsComponentsWrapper
+    }, items.map((component, key) => {
       const props = {
         key
       };

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _class, _temp;
+var _class;
 
 import React from 'react';
 import { createPortal, unstable_renderSubtreeIntoContainer, unmountComponentAtNode } from 'react-dom';
@@ -156,7 +156,7 @@ const dummyAnalyticsContext = {
   getAtlaskitAnalyticsEventHandlers() {}
 
 };
-const AnalyticsContextWrapper = (_temp = _class = class AnalyticsContextWrapper extends React.Component {
+const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends React.Component {
   render() {
     const {
       value
@@ -170,4 +170,4 @@ const AnalyticsContextWrapper = (_temp = _class = class AnalyticsContextWrapper
 
 }, _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
-}), _temp);
+}), _class);

package/dist/es2019/ui/Resizer/styled.js

@@ -1,8 +1,8 @@
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const wrapperStyle = props => css`
   & > div {
-    ${MediaSingleDimensionHelper};
+    ${MediaSingleDimensionHelper(props)};
     position: relative;
     clear: both;
 

package/dist/es2019/ui/Toolbar/ToolbarInner.js

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-const ToolbarComponentsWrapper = styled.div`
+const toolbarComponentsWrapper = css`
   display: flex;
 
   @media (max-width: ${akEditorMobileMaxWidth}px) {
@@ -35,7 +36,9 @@ export class ToolbarInner extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ToolbarComponentsWrapper, null, items.map((component, key) => {
+    return jsx("div", {
+      css: toolbarComponentsWrapper
+    }, items.map((component, key) => {
       const props = {
         key
       };

package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import { useElementWidth } from './hooks';
 import { widthToToolbarSize, toolbarSizeToWidth } from './toolbar-size';
 import { Toolbar } from './Toolbar';
 import { ToolbarSize } from './types';
-const StyledToolBar = styled.div`
+const toolbar = css`
   width: 100%;
-  min-width: ${({
-  minWidth
-}) => minWidth};
   position: relative;
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     grid-column: 1 / 2;
@@ -27,14 +26,18 @@ export const ToolbarWithSizeDetector = props => {
     skip: typeof width !== 'undefined'
   });
   const toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : widthToToolbarSize(width || elementWidth, props.appearance);
-  const toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/React.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? `${toolbarMinWidth}px` : '254px'
-  }, /*#__PURE__*/React.createElement(WidthObserver, {
+  const toolbarStyle = useMemo(() => {
+    const toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
+    const minWidth = `min-width: ${props.hasMinWidth ? toolbarMinWidth : '254'}px`;
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return jsx("div", {
+    css: toolbarStyle
+  }, jsx(WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
+  }), props.editorView && toolbarSize ? jsx(Toolbar, _extends({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : jsx("div", {
     ref: ref
   }));
 };

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

@@ -1,12 +1,13 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import styled from 'styled-components';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import Button from './styles';
 import { ACTION_SUBJECT, EVENT_TYPE, ACTION } from '../../plugins/analytics/types/enums';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../plugins/analytics/types/toolbar-button';
 export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-const ButtonWrapper = styled.div`
+const buttonWrapper = css`
   display: flex;
   height: 100%;
 `;
@@ -57,7 +58,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
-  const button = /*#__PURE__*/React.createElement(Button, {
+  const button = jsx(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -83,10 +84,12 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
 
   const tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/React.createElement(ButtonWrapper, null, button));
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
 });
 export default ToolbarButton;

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -9,7 +11,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import ToolbarButton from '../ToolbarButton';
 import withOuterListeners from '../with-outer-listeners';
-import { Wrapper, ButtonContent, ConfirmationPopup, ConfirmationText, ConfirmationHeader, ConfirmationImg } from './styles';
+import { wrapper, buttonContent, confirmationPopup, confirmationText, confirmationHeader, confirmationImg } from './styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../plugins/analytics';
 import { createDispatch } from '../../event-dispatcher';
 import { openFeedbackDialog } from '../../plugins/feedback-dialog';
@@ -131,15 +133,19 @@ export default class ToolbarFeedback extends PureComponent {
       popupsBoundariesElement,
       popupsScrollableElement
     } = this.props;
-    const iconBefore = this.state.jiraIssueCollectorScriptLoading ? /*#__PURE__*/React.createElement(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
+    const iconBefore = this.state.jiraIssueCollectorScriptLoading ? jsx(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-    return this.hasJquery() ? /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return this.hasJquery() ? jsx("div", {
+      css: wrapper
+    }, jsx(ToolbarButton, {
       ref: this.handleRef,
       iconBefore: iconBefore,
       onClick: this.collectFeedback,
       selected: false,
       spacing: "compact"
-    }, /*#__PURE__*/React.createElement(ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/React.createElement(PopupWithOutsideListeners, {
+    }, jsx("span", {
+      css: buttonContent
+    }, "Feedback")), this.state.showOptOutOption && jsx(PopupWithOutsideListeners, {
       target: this.state.target,
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
@@ -148,12 +154,19 @@ export default class ToolbarFeedback extends PureComponent {
       fitWidth: POPUP_WIDTH,
       handleClickOutside: this.toggleShowOptOutOption,
       handleEscapeKeydown: this.toggleShowOptOutOption
-    }, /*#__PURE__*/React.createElement(ConfirmationPopup, null, /*#__PURE__*/React.createElement(ConfirmationHeader, null, /*#__PURE__*/React.createElement(ConfirmationImg, {
+    }, jsx("div", {
+      css: confirmationPopup
+    }, jsx("div", {
+      css: confirmationHeader
+    }, jsx("img", {
+      css: confirmationImg,
       src: EDITOR_IMAGE_URL
-    })), /*#__PURE__*/React.createElement(ConfirmationText, null, /*#__PURE__*/React.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/React.createElement("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    })), jsx("div", {
+      css: confirmationText
+    }, jsx("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), jsx("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), jsx(ButtonGroup, null, jsx(Button, {
       appearance: "primary",
       onClick: this.openFeedbackPopup
-    }, "Give feedback"), /*#__PURE__*/React.createElement(Button, {
+    }, "Give feedback"), jsx(Button, {
       appearance: "default",
       onClick: this.openLearnMorePage
     }, "Learn more")))))) : null;

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

@@ -1,20 +1,18 @@
-import styled from 'styled-components';
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export const ButtonContent = styled.span`
+export const buttonContent = css`
   display: flex;
   height: 24px;
   line-height: 24px;
   min-width: 70px;
 `;
-export const Wrapper = styled.span`
+export const wrapper = css`
   display: flex;
-  margin-right: ${({
-  width
-}) => !width || width === 'large' ? 0 : gridSize()}px;
+  margin-right: 0;
 `;
-export const ConfirmationPopup = styled.div`
+export const confirmationPopup = css`
   background: #fff;
   border-radius: ${borderRadius()}px;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
@@ -26,7 +24,7 @@ export const ConfirmationPopup = styled.div`
   height: 410px;
   width: 280px;
 `;
-export const ConfirmationText = styled.div`
+export const confirmationText = css`
   font-size: ${relativeFontSizeToBase16(14)};
   word-spacing: 4px;
   line-height: 22px;
@@ -43,13 +41,13 @@ export const ConfirmationText = styled.div`
     margin-bottom: 20px;
   }
 `;
-export const ConfirmationHeader = styled.div`
+export const confirmationHeader = css`
   background-color: ${P400};
   height: 100px;
   width: 100%;
   display: inline-block;
 `;
-export const ConfirmationImg = styled.img`
+export const confirmationImg = css`
   width: 100px;
   display: block;
   margin: 25px auto 0 auto;

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
 const pulseBackground = keyframes`
   50% {
@@ -18,13 +20,20 @@ const pulseBackgroundReverse = keyframes`
     background-color: ${R100};
   }
 `;
-const Wrapper = styled.div`
+const flashWrapper = css`
   &.-flash > div {
     animation: 0.25s ease-in-out ${pulseBackgroundReverse};
   }
 
   & > div {
-    animation: ${props => props.animate ? `.25s ease-in-out ${pulseBackground}` : 'none'};
+    animation: 'none';
+  }
+`;
+const flashWrapperAnimated = css`
+  ${flashWrapper}
+
+  & > div {
+    animation: 0.25s ease-in-out ${pulseBackground};
   }
 `;
 export default class WithFlash extends React.Component {
@@ -40,9 +49,9 @@ export default class WithFlash extends React.Component {
       children
     } = this.props;
     this.toggle = animate && !this.toggle;
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      className: this.toggle ? '-flash' : '',
-      animate: animate
+    return jsx("div", {
+      css: animate ? flashWrapperAnimated : flashWrapper,
+      className: this.toggle ? '-flash' : ''
     }, children);
   }