@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -1,12 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { Container } from './styles';
+import { container } from './styles';
 export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
 export default class FloatingToolbar extends PureComponent {
   render() {
     const {
-      containerRef,
       children,
       target,
       offset,
@@ -25,7 +25,7 @@ export default class FloatingToolbar extends PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       alignX: alignX,
       alignY: alignY,
       target: target,
@@ -36,10 +36,10 @@ export default class FloatingToolbar extends PureComponent {
       fitWidth: fitWidth,
       fitHeight: fitHeight,
       onPositionCalculated: onPositionCalculated
-    }, /*#__PURE__*/React.createElement(Container, {
-      height: fitHeight,
-      className: className,
-      innerRef: containerRef
+    }, jsx("div", {
+      css: container(fitHeight),
+      "data-testid": "popup-container",
+      className: className
     }, children));
   }
 

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

@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
-export const Container = styled.div`
+export const container = height => css`
   border-radius: ${borderRadius()}px;
   ${dropShadow}
   display: flex;
@@ -10,9 +10,7 @@ export const Container = styled.div`
   box-sizing: border-box;
   padding: 4px 8px;
   background-color: ${N0};
-  ${({
-  height
-}) => height ? css`
-          height: ${height}px;
-        ` : ''};
+  ${height ? css`
+        height: ${height}px;
+      ` : ''};
 `;

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/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/styles.js

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import { N30, N100 } from '@atlaskit/theme/colors';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 const akGridSize = gridSize() + 'px';
-export const ButtonGroup = styled.span`
+export const buttonGroupStyle = css`
   display: inline-flex;
   align-items: center;
 
@@ -11,14 +11,14 @@ export const ButtonGroup = styled.span`
     display: flex;
   }
 `;
-export const Separator = styled.span`
+export const separatorStyles = css`
   background: ${N30};
   width: 1px;
   height: 24px;
   display: inline-block;
   margin: 0 8px;
 `;
-export const Wrapper = styled.span`
+export const wrapperStyle = css`
   display: flex;
   align-items: center;
 
@@ -30,34 +30,38 @@ export const Wrapper = styled.span`
   > div > div {
     display: flex;
   }
-  margin-left: ${({
-  isSmall
-}) => isSmall ? 4 : 0}px;
-  min-width: ${({
-  isSmall
-}) => isSmall ? '40px' : 'auto'};
+
+  margin-left: 0;
+  min-width: auto;
+`;
+export const wrapperSmallStyle = css`
+  margin-left: 4px;
+  min-width: 40px;
 `;
-export const ExpandIconWrapper = styled.span`
+export const expandIconWrapperStyle = css`
   margin-left: -8px;
 `;
-export const TriggerWrapper = styled.div`
+export const triggerWrapperStyles = css`
   display: flex;
 `;
-export const MenuWrapper = Wrapper;
-export const ButtonContent = styled.span`
+export const buttonContentStyle = css`
   display: flex;
   min-width: 80px;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   flex-direction: column;
-  padding: 0 ${props => props.spacing === 'none' ? '8px' : '6px'};
+  padding: 6px;
+`;
+export const buttonContentReducedSpacingStyle = css`
+  padding: 8px;
 `; // Taken from the style of inline dialog components
 
 export const dropShadow = css`
   box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25);
-`;
+`; // TODO change to use emotion css
+
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
@@ -83,7 +87,7 @@ export const scrollbarStyles = `
     background-color: rgba(0, 0, 0, 0.4);
   }
 `;
-export const Shortcut = styled.div`
+export const shortcutStyle = css`
   background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */
   color: ${N100};
   border-radius: ${borderRadius()}px;
@@ -95,11 +99,11 @@ export const Shortcut = styled.div`
     display: none;
   }
 `;
-export const ClickSelectWrapper = styled.span`
+export const clickSelectWrapperStyle = css`
   user-select: all;
 `;
-export const CellColourPreview = styled.div`
+export const cellColourPreviewStyles = selectedColor => css`
   &::before {
-    background: ${props => props.selectedColor};
+    background: ${selectedColor};
   }
 `;