@atlaskit/table-tree 9.1.8 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/table-tree
 
+## 9.2.0
+
+### Minor Changes
+
+- [`181c4b6cc3a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/181c4b6cc3a) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.10
+
+### Patch Changes
+
+- [`70c2c0e00ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70c2c0e00ea) - Updates `@emotion/core` v10 to `@emotion/react` v11. No expected behaviour change.
+
+## 9.1.9
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
 ## 9.1.8
 
 ### Patch Changes

package/dist/cjs/components/header.js

@@ -19,9 +19,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -33,7 +35,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var headerStyles = (0, _core.css)({
+var headerStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: 12,
   fontWeight: 'bold',
@@ -41,6 +43,11 @@ var headerStyles = (0, _core.css)({
   lineHeight: '1.67'
 });
 
+var _StyledColumnCell = (0, _styledComponents.default)(_commonCell.default).withConfig({
+  displayName: "header___StyledColumnCell",
+  componentId: "sc-1yvg8oq-0"
+})(["", ""], headerStyles);
+
 var Header = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Header, _Component);
 
@@ -55,8 +62,7 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return (0, _core.jsx)(_commonCell.default, (0, _extends2.default)({
-        css: headerStyles,
+      return (0, _react2.jsx)(_StyledColumnCell, (0, _extends2.default)({
         role: "columnheader",
         style: {
           width: props.width

package/dist/cjs/components/headers.js

@@ -17,19 +17,26 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   display: 'flex',
   borderBottom: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
 });
 
+var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
+  displayName: "headers___StyledDiv",
+  componentId: "h5d3f7-0"
+})(["", ""], containerStyles);
+
 var Headers = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Headers, _Component);
 
@@ -43,8 +50,7 @@ var Headers = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(Headers, [{
     key: "render",
     value: function render() {
-      return (0, _core.jsx)("div", {
-        css: containerStyles,
+      return (0, _react2.jsx)(_StyledDiv, {
         role: "row"
       }, _react.Children.map(this.props.children, function (header, index) {
         return (

package/dist/cjs/components/internal/common-cell.js

@@ -11,12 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _excluded = ["indent", "width"];
-var commonStyles = (0, _core.css)({
+var commonStyles = (0, _react.css)({
   display: 'flex',
   boxSizing: 'border-box',
   minHeight: 40,
@@ -27,6 +29,11 @@ var commonStyles = (0, _core.css)({
   lineHeight: '20px'
 });
 
+var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
+  displayName: "common-cell___StyledDiv",
+  componentId: "t3yvaw-0"
+})(["", ""], commonStyles);
+
 /**
  * __Common cell__
  */
@@ -34,12 +41,11 @@ var CommonCell = function CommonCell(_ref) {
   var indent = _ref.indent,
       width = _ref.width,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)(_StyledDiv, (0, _extends2.default)({}, props, {
     style: {
       '--indent': indent,
       width: width
-    },
-    css: commonStyles
+    }
   }));
 };
 

package/dist/cjs/components/internal/item.js

@@ -21,7 +21,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _toItemId = _interopRequireDefault(require("../../utils/to-item-id"));
 
@@ -62,9 +62,9 @@ var Item = /*#__PURE__*/function (_Component) {
         depth: depth,
         data: data,
         renderChildren: function renderChildren() {
-          return (0, _core.jsx)("div", {
+          return (0, _react2.jsx)("div", {
             id: (0, _toItemId.default)(itemId)
-          }, (0, _core.jsx)(_items.default, {
+          }, (0, _react2.jsx)(_items.default, {
             parentData: data,
             depth: depth,
             items: items,

package/dist/cjs/components/internal/overflow-container.js

@@ -11,10 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = require("@emotion/react");
 
 var _excluded = ["isSingleLine"];
-var overflowContainerStyles = (0, _core.css)({
+var overflowContainerStyles = (0, _react.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -23,13 +25,20 @@ var overflowContainerStyles = (0, _core.css)({
  * __Overflow container__
  */
 
+var _StyledSpan = (0, _styledComponents.default)("span").withConfig({
+  displayName: "overflow-container___StyledSpan",
+  componentId: "sc-1m74akj-0"
+})(["", ""], function (p) {
+  return p._css;
+});
+
 var OverflowContainer = function OverflowContainer(_ref) {
   var isSingleLine = _ref.isSingleLine,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)("span", (0, _extends2.default)({
-      css: isSingleLine && overflowContainerStyles
-    }, props))
+    (0, _react.jsx)(_StyledSpan, (0, _extends2.default)({}, props, {
+      _css: isSingleLine && overflowContainerStyles
+    }))
   );
 };
 

package/dist/cjs/components/internal/styled.js

@@ -7,18 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.iconColor = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _excluded = ["isRoot"];
 var iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 exports.iconColor = iconColor;
-var treeRowContainerStyles = (0, _core.css)({
+var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
   borderBottom: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
 });
@@ -26,16 +28,19 @@ var treeRowContainerStyles = (0, _core.css)({
  * __Tree row container__
  */
 
+var _StyledDiv = (0, _styledComponents.default)("div").withConfig({
+  displayName: "styled___StyledDiv",
+  componentId: "sc-8rz2kg-0"
+})(["", ""], treeRowContainerStyles);
+
 var TreeRowContainer = function TreeRowContainer(props) {
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)("div", (0, _extends2.default)({
-      css: treeRowContainerStyles
-    }, props))
+    (0, _react.jsx)(_StyledDiv, props)
   );
 };
 
 exports.TreeRowContainer = TreeRowContainer;
-var commonChevronContainerStyles = (0, _core.css)({
+var commonChevronContainerStyles = (0, _react.css)({
   display: 'flex',
   marginLeft: -25,
   position: 'absolute',
@@ -46,15 +51,18 @@ var commonChevronContainerStyles = (0, _core.css)({
  * __Chevron container__
  */
 
+var _StyledSpan = (0, _styledComponents.default)("span").withConfig({
+  displayName: "styled___StyledSpan",
+  componentId: "sc-8rz2kg-1"
+})(["", ""], commonChevronContainerStyles);
+
 var ChevronContainer = function ChevronContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return (0, _core.jsx)("span", (0, _extends2.default)({}, props, {
-    css: commonChevronContainerStyles
-  }));
+  return (0, _react.jsx)(_StyledSpan, props);
 };
 
 exports.ChevronContainer = ChevronContainer;
-var chevronIconContainerStyles = (0, _core.css)({
+var chevronIconContainerStyles = (0, _react.css)({
   position: 'relative',
   top: 1
 });
@@ -64,19 +72,22 @@ var chevronIconContainerStyles = (0, _core.css)({
  * A chevron icon container.
  */
 
+var _StyledSpan2 = (0, _styledComponents.default)("span").withConfig({
+  displayName: "styled___StyledSpan2",
+  componentId: "sc-8rz2kg-2"
+})(["", ""], chevronIconContainerStyles);
+
 var ChevronIconContainer = function ChevronIconContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return (0, _core.jsx)("span", (0, _extends2.default)({}, props, {
-    css: chevronIconContainerStyles
-  }));
+  return (0, _react.jsx)(_StyledSpan2, props);
 };
 
 exports.ChevronIconContainer = ChevronIconContainer;
-var loadingItemContainerStyles = (0, _core.css)({
+var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
   paddingTop: 5
 });
-var paddingLeftStyles = (0, _core.css)({
+var paddingLeftStyles = (0, _react.css)({
   paddingLeft: '50%'
 });
 /**
@@ -85,13 +96,19 @@ var paddingLeftStyles = (0, _core.css)({
  * A loader item container.
  */
 
+var _StyledSpan3 = (0, _styledComponents.default)("span").withConfig({
+  displayName: "styled___StyledSpan3",
+  componentId: "sc-8rz2kg-3"
+})(["", ""], function (p) {
+  return p._css;
+});
+
 var LoaderItemContainer = function LoaderItemContainer(_ref) {
   var isRoot = _ref.isRoot,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("span", (0, _extends2.default)({
-    css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  }, props));
+  return (0, _react.jsx)(_StyledSpan3, (0, _extends2.default)({}, props, {
+    _css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
+  }));
 };
 
 exports.LoaderItemContainer = LoaderItemContainer;

package/dist/cjs/components/row.js

@@ -44,7 +44,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.1.8";
+var packageVersion = "9.2.0";
 
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.1.8",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/es2019/components/header.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _styled from "styled-components";
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
@@ -14,13 +15,17 @@ const headerStyles = css({
   lineHeight: '1.67'
 });
 
+var _StyledColumnCell = _styled(ColumnCell).withConfig({
+  displayName: "header___StyledColumnCell",
+  componentId: "sc-1yvg8oq-0"
+})(["", ""], headerStyles);
+
 class Header extends Component {
   render() {
     const {
       props
     } = this;
-    return jsx(ColumnCell, _extends({
-      css: headerStyles,
+    return jsx(_StyledColumnCell, _extends({
       role: "columnheader",
       style: {
         width: props.width

package/dist/es2019/components/headers.js

@@ -1,16 +1,23 @@
+import _styled from "styled-components";
+
 /** @jsx jsx */
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { Children, cloneElement, Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const containerStyles = css({
   display: 'flex',
   borderBottom: `solid 2px ${"var(--ds-border, #dfe1e6)"}`
 });
+
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "headers___StyledDiv",
+  componentId: "h5d3f7-0"
+})(["", ""], containerStyles);
+
 export default class Headers extends Component {
   render() {
-    return jsx("div", {
-      css: containerStyles,
+    return jsx(_StyledDiv, {
       role: "row"
     }, Children.map(this.props.children, (header, index) =>
     /*#__PURE__*/

package/dist/es2019/components/internal/common-cell.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import _styled from "styled-components";
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const commonStyles = css({
   display: 'flex',
@@ -14,6 +13,11 @@ const commonStyles = css({
   lineHeight: '20px'
 });
 
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "common-cell___StyledDiv",
+  componentId: "t3yvaw-0"
+})(["", ""], commonStyles);
+
 /**
  * __Common cell__
  */
@@ -21,12 +25,11 @@ const CommonCell = ({
   indent,
   width,
   ...props
-}) => jsx("div", _extends({}, props, {
+}) => jsx(_StyledDiv, _extends({}, props, {
   style: {
     '--indent': indent,
     width
-  },
-  css: commonStyles
+  }
 }));
 
 export default CommonCell;

package/dist/es2019/components/internal/item.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { cloneElement, Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 export default class Item extends Component {

package/dist/es2019/components/internal/overflow-container.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import _styled from "styled-components";
+import { css, jsx } from '@emotion/react';
 const overflowContainerStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -11,12 +10,17 @@ const overflowContainerStyles = css({
  * __Overflow container__
  */
 
+var _StyledSpan = _styled("span").withConfig({
+  displayName: "overflow-container___StyledSpan",
+  componentId: "sc-1m74akj-0"
+})(["", ""], p => p._css);
+
 const OverflowContainer = ({
   isSingleLine,
   ...props
 }) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx("span", _extends({
-  css: isSingleLine && overflowContainerStyles
-}, props));
+jsx(_StyledSpan, _extends({}, props, {
+  _css: isSingleLine && overflowContainerStyles
+}));
 
 export default OverflowContainer;

package/dist/es2019/components/internal/styled.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import _styled from "styled-components";
+import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export const iconColor = `var(--ds-text, ${N800})`;
 const treeRowContainerStyles = css({
@@ -12,10 +11,13 @@ const treeRowContainerStyles = css({
  * __Tree row container__
  */
 
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "styled___StyledDiv",
+  componentId: "sc-8rz2kg-0"
+})(["", ""], treeRowContainerStyles);
+
 export const TreeRowContainer = props => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx("div", _extends({
-  css: treeRowContainerStyles
-}, props));
+jsx(_StyledDiv, props);
 const commonChevronContainerStyles = css({
   display: 'flex',
   marginLeft: -25,
@@ -27,10 +29,13 @@ const commonChevronContainerStyles = css({
  * __Chevron container__
  */
 
+var _StyledSpan = _styled("span").withConfig({
+  displayName: "styled___StyledSpan",
+  componentId: "sc-8rz2kg-1"
+})(["", ""], commonChevronContainerStyles);
+
 export const ChevronContainer = (props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) => jsx("span", _extends({}, props, {
-  css: commonChevronContainerStyles
-}));
+) => jsx(_StyledSpan, props);
 const chevronIconContainerStyles = css({
   position: 'relative',
   top: 1
@@ -41,10 +46,13 @@ const chevronIconContainerStyles = css({
  * A chevron icon container.
  */
 
+var _StyledSpan2 = _styled("span").withConfig({
+  displayName: "styled___StyledSpan2",
+  componentId: "sc-8rz2kg-2"
+})(["", ""], chevronIconContainerStyles);
+
 export const ChevronIconContainer = (props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) => jsx("span", _extends({}, props, {
-  css: chevronIconContainerStyles
-}));
+) => jsx(_StyledSpan2, props);
 const loadingItemContainerStyles = css({
   width: '100%',
   paddingTop: 5
@@ -58,10 +66,14 @@ const paddingLeftStyles = css({
  * A loader item container.
  */
 
+var _StyledSpan3 = _styled("span").withConfig({
+  displayName: "styled___StyledSpan3",
+  componentId: "sc-8rz2kg-3"
+})(["", ""], p => p._css);
+
 export const LoaderItemContainer = ({
   isRoot,
   ...props
-}) => jsx("span", _extends({
-  css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-}, props));
+}) => jsx(_StyledSpan3, _extends({}, props, {
+  _css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
+}));

package/dist/es2019/components/row.js

@@ -8,7 +8,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.1.8";
+const packageVersion = "9.2.0";
 
 class Row extends Component {
   constructor(...args) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.1.8",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/esm/components/header.js

@@ -4,6 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _styled from "styled-components";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -11,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
@@ -23,6 +24,11 @@ var headerStyles = css({
   lineHeight: '1.67'
 });
 
+var _StyledColumnCell = _styled(ColumnCell).withConfig({
+  displayName: "header___StyledColumnCell",
+  componentId: "sc-1yvg8oq-0"
+})(["", ""], headerStyles);
+
 var Header = /*#__PURE__*/function (_Component) {
   _inherits(Header, _Component);
 
@@ -38,8 +44,7 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return jsx(ColumnCell, _extends({
-        css: headerStyles,
+      return jsx(_StyledColumnCell, _extends({
         role: "columnheader",
         style: {
           width: props.width