@gridsuite/commons-ui 0.34.1 → 0.35.0

package/lib/components/ElementSearchDialog/equipment-item.js

@@ -10,6 +10,8 @@ var _reactIntl = require("react-intl");
 var _OverflowableText = _interopRequireDefault(require("../OverflowableText"));
 var _react = _interopRequireDefault(require("react"));
 var _EquipmentType = require("../../utils/EquipmentType");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _styles = require("../../utils/styles");
 var _excluded = ["inputValue", "suffixRenderer", "element", "showsJustText"];
 /**
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
@@ -21,6 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var EquipmentItem = function EquipmentItem(_ref) {
+  var _props$classes, _props$styles, _props$classes2, _props$classes3, _props$styles2, _props$styles3, _props$classes4, _props$styles4;
   var inputValue = _ref.inputValue,
     _ref$suffixRenderer = _ref.suffixRenderer,
     suffixRenderer = _ref$suffixRenderer === void 0 ? _index.TagRenderer : _ref$suffixRenderer,
@@ -36,17 +39,21 @@ var EquipmentItem = function EquipmentItem(_ref) {
   /* override li.key otherwise it will use label which could be duplicated */
   return /*#__PURE__*/_react["default"].createElement("li", _extends({
     key: element.key
-  }, props), /*#__PURE__*/_react["default"].createElement("div", {
-    className: props.classes.equipmentOption
-  }, !showsJustText && /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _clsx["default"])(props.classes.equipmentTag, props.classes.equipmentTypeTag)
+  }, props), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    className: (_props$classes = props.classes) === null || _props$classes === void 0 ? void 0 : _props$classes.equipmentOption,
+    sx: (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.equipmentOption
+  }, !showsJustText && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    component: "span",
+    className: (0, _clsx["default"])((_props$classes2 = props.classes) === null || _props$classes2 === void 0 ? void 0 : _props$classes2.equipmentTag, (_props$classes3 = props.classes) === null || _props$classes3 === void 0 ? void 0 : _props$classes3.equipmentTypeTag),
+    sx: (0, _styles.mergeSx)((_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.equipmentTag, (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.equipmentTypeTag)
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: _EquipmentType.EQUIPMENT_TYPE[element.type].tagLabel
   })), /*#__PURE__*/_react["default"].createElement(_OverflowableText["default"], {
     text: parts.map(function (e) {
       return e.text;
     }).join(),
-    className: props.classes.result
+    className: (_props$classes4 = props.classes) === null || _props$classes4 === void 0 ? void 0 : _props$classes4.result,
+    sx: (_props$styles4 = props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.result
   }, parts.map(function (part, index) {
     return /*#__PURE__*/_react["default"].createElement("span", {
       key: index,

package/lib/components/ElementSearchDialog/tag-renderer.js

@@ -7,6 +7,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
 var _EquipmentType = require("../../utils/EquipmentType");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("../../utils/styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
@@ -19,9 +20,11 @@ var TagRenderer = function TagRenderer(_ref) {
   var props = _ref.props,
     element = _ref.element;
   if (element.type !== _EquipmentType.EQUIPMENT_TYPE.SUBSTATION.name && element.type !== _EquipmentType.EQUIPMENT_TYPE.VOLTAGE_LEVEL.name) {
+    var _props$classes, _props$classes2, _props$styles, _props$styles2;
     return /*#__PURE__*/_react["default"].createElement(_OverflowableText["default"], {
       text: element.voltageLevelLabel,
-      className: (0, _clsx["default"])(props.classes.equipmentTag, props.classes.equipmentVlTag)
+      className: (0, _clsx["default"])((_props$classes = props.classes) === null || _props$classes === void 0 ? void 0 : _props$classes.equipmentTag, (_props$classes2 = props.classes) === null || _props$classes2 === void 0 ? void 0 : _props$classes2.equipmentVlTag),
+      sx: (0, _styles.mergeSx)((_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.equipmentTag, (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.equipmentVlTag)
     });
   }
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);

package/lib/components/FlatParameters/FlatParameters.js

@@ -4,10 +4,8 @@ exports.__esModule = true;
 exports["default"] = exports.FlatParameters = void 0;
 exports.extractDefault = extractDefault;
 var _react = _interopRequireWildcard(require("react"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _material = require("@mui/material");
 var _reactIntl = require("react-intl");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,26 +17,26 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
                                                                                                                                                                                      * License, v. 2.0. If a copy of the MPL was not distributed with this
                                                                                                                                                                                      * file, You can obtain one at http://mozilla.org/MPL/2.0/.
                                                                                                                                                                                      */
-var useStyles = (0, _makeStyles["default"])(function (theme) {
-  return {
-    paramList: {
-      width: '100%',
-      margin: 0
-    },
-    paramListItem: {
+var styles = {
+  paramList: {
+    width: '100%',
+    margin: 0
+  },
+  paramListItem: function paramListItem(theme) {
+    return {
       display: 'flex',
       justifyContent: 'space-between',
       gap: theme.spacing(2),
       paddingLeft: 0,
       paddingRight: 0
-    },
-    paramName: {
-      fontWeight: 'bold',
-      minWidth: '30%',
-      overflowWrap: 'anywhere'
-    }
-  };
-});
+    };
+  },
+  paramName: {
+    fontWeight: 'bold',
+    minWidth: '30%',
+    overflowWrap: 'anywhere'
+  }
+};
 var FloatRE = /^-?\d*[.,]?\d*([eE]-?\d*)?$/;
 var IntegerRE = /^-?\d*$/;
 var ListRE = /^\[(.*)]$/;
@@ -102,7 +100,6 @@ var FlatParameters = function FlatParameters(_ref) {
     variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$showSeparator = _ref.showSeparator,
     showSeparator = _ref$showSeparator === void 0 ? false : _ref$showSeparator;
-  var classes = useStyles();
   var intl = (0, _reactIntl.useIntl)();
   var longestPrefix = longestCommonPrefix(paramsAsArray.map(function (m) {
     return m.name;
@@ -361,12 +358,12 @@ var FlatParameters = function FlatParameters(_ref) {
     }
   };
   return /*#__PURE__*/_react["default"].createElement(_material.List, {
-    className: classes.paramList
+    sx: styles.paramList
   }, paramsAsArray.map(function (param, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: param.name
     }, /*#__PURE__*/_react["default"].createElement(_material.ListItem, {
-      className: classes.paramListItem
+      sx: styles.paramListItem
     }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
       title: /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
         id: param.name + '.desc',
@@ -375,7 +372,7 @@ var FlatParameters = function FlatParameters(_ref) {
       enterDelay: 1200,
       key: param.name
     }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
-      className: classes.paramName
+      sx: styles.paramName
     }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
       id: param.name,
       defaultMessage: param.name.slice(prefix.length)

package/lib/components/Login/Login.js

@@ -9,7 +9,6 @@ var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _LockOutlined = _interopRequireDefault(require("@mui/icons-material/LockOutlined"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 var _reactIntl = require("react-intl");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,39 +19,42 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-var useStyles = (0, _makeStyles["default"])(function (theme) {
-  return {
-    paper: {
+var styles = {
+  paper: function paper(theme) {
+    return {
       marginTop: theme.spacing(8),
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center'
-    },
-    avatar: {
+    };
+  },
+  avatar: function avatar(theme) {
+    return {
       margin: theme.spacing(1),
       backgroundColor: theme.palette.secondary.main
-    },
-    submit: {
+    };
+  },
+  submit: function submit(theme) {
+    return {
       margin: theme.spacing(3, 0, 2),
       borderRadius: '30px'
-    },
-    logo: {
-      width: 64,
-      height: 64
-    }
-  };
-});
+    };
+  },
+  logo: {
+    width: 64,
+    height: 64
+  }
+};
 var Login = function Login(_ref) {
   var onLoginClick = _ref.onLoginClick,
     disabled = _ref.disabled;
-  var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_Container["default"], {
     component: "main",
     maxWidth: "xs"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.paper
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: styles.paper
   }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
-    className: classes.avatar
+    sx: styles.avatar
   }, /*#__PURE__*/_react["default"].createElement(_LockOutlined["default"], null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     component: "h1",
     variant: "h5"
@@ -63,7 +65,7 @@ var Login = function Login(_ref) {
     disabled: disabled,
     fullWidth: true,
     variant: "contained",
-    className: classes.submit,
+    sx: styles.submit,
     onClick: onLoginClick
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "login/connection",

package/lib/components/Login/Logout.js

@@ -9,7 +9,6 @@ var _Link = _interopRequireDefault(require("@mui/material/Link"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _LogoutOutlined = _interopRequireDefault(require("@mui/icons-material/LogoutOutlined"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 var _reactIntl = require("react-intl");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,32 +19,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-var useStyles = (0, _makeStyles["default"])(function (theme) {
-  return {
-    paper: {
+var styles = {
+  paper: function paper(theme) {
+    return {
       marginTop: theme.spacing(8),
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center'
-    },
-    avatar: {
+    };
+  },
+  avatar: function avatar(theme) {
+    return {
       margin: theme.spacing(1),
       backgroundColor: theme.palette.error.main
-    },
-    submit: {
+    };
+  },
+  submit: function submit(theme) {
+    return {
       margin: theme.spacing(3, 0, 2),
       borderRadius: '30px'
-    },
-    logo: {
-      width: 64,
-      height: 64
-    }
-  };
-});
+    };
+  }
+};
 var Logout = function Logout(_ref) {
   var onLogoutClick = _ref.onLogoutClick,
     disabled = _ref.disabled;
-  var classes = useStyles();
   function Copyright() {
     return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       variant: "body2",
@@ -59,10 +57,10 @@ var Logout = function Logout(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_Container["default"], {
     component: "main",
     maxWidth: "xs"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.paper
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: styles.paper
   }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
-    className: classes.avatar
+    sx: styles.avatar
   }, /*#__PURE__*/_react["default"].createElement(_LogoutOutlined["default"], null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     component: "h1",
     variant: "h5"
@@ -73,7 +71,7 @@ var Logout = function Logout(_ref) {
     disabled: disabled,
     fullWidth: true,
     variant: "contained",
-    className: classes.submit,
+    sx: styles.submit,
     onClick: onLogoutClick
   }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
     id: "login/logout",

package/lib/components/MuiVirtualizedTable/ColumnHeader.js

@@ -3,11 +3,12 @@
 exports.__esModule = true;
 exports["default"] = exports.ColumnHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/styles");
 var _FilterAltOutlined = _interopRequireDefault(require("@mui/icons-material/FilterAltOutlined"));
+var _system = require("@mui/system");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _ArrowUpward = _interopRequireDefault(require("@mui/icons-material/ArrowUpward"));
 var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDownward"));
+var _styles = require("../../utils/styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,45 +19,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    label: {
-      fontWeight: 'bold',
-      fontSize: '0.875rem' // to mimic TableCellRoot 'binding'
-    },
+var styles = {
+  label: {
+    fontWeight: 'bold',
+    fontSize: '0.875rem' // to mimic TableCellRoot 'binding'
+  },
 
-    divFlex: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      height: '100%'
-    },
-    divNum: {
-      flexDirection: 'row-reverse',
-      textAlign: 'right'
-    },
-    sortDiv: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
-    },
-    sortButton: {
-      fill: 'currentcolor'
-    },
-    filterButton: {
-      stroke: 'currentcolor'
-    },
-    filterTooLossy: {
+  divFlex: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '100%'
+  },
+  divNum: {
+    flexDirection: 'row-reverse',
+    textAlign: 'right'
+  },
+  sortDiv: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  sortButton: {
+    fill: 'currentcolor'
+  },
+  filterButton: {
+    stroke: 'currentcolor'
+  },
+  filterTooLossy: function filterTooLossy(theme) {
+    return {
       stroke: theme.palette.secondary.main
-    },
-    transparent: {
-      opacity: 0
-    },
-    hovered: {
-      opacity: 0.5
-    }
-  };
-});
+    };
+  },
+  transparent: {
+    opacity: 0
+  },
+  hovered: {
+    opacity: 0.5
+  }
+};
 
 // Shows an arrow pointing to smaller value when sorting is active.
 // signedRank of 0 means no sorting, we only show the arrow on hovering of the header,
@@ -64,24 +65,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 // signedRank > 0 means sorted by ascending value from lower indices to higher indices
 // so lesser values are at top, so the upward arrow
 var SortButton = function SortButton(props) {
-  var classes = useStyles();
   var sortRank = Math.abs(props.signedRank);
-  var visibilityClass = !props.signedRank && (props.headerHovered ? classes.hovered : classes.transparent);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx["default"])(classes.sortDiv),
+  var visibilityStyle = (!props.signedRank || undefined) && (props.headerHovered ? styles.hovered : styles.transparent);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: styles.sortDiv,
     onClick: props.onClick
   }, props.signedRank >= 0 ? /*#__PURE__*/_react["default"].createElement(_ArrowUpward["default"], {
-    className: (0, _clsx["default"])(visibilityClass)
+    sx: visibilityStyle
   }) : /*#__PURE__*/_react["default"].createElement(_ArrowDownward["default"], {
-    className: (0, _clsx["default"])(visibilityClass)
+    sx: visibilityStyle
   }), sortRank > 1 && !props.hovered && /*#__PURE__*/_react["default"].createElement("sub", null, sortRank));
 };
 var FilterButton = function FilterButton(props) {
-  var classes = useStyles();
-  var visibilityClass = !props.filterLevel && (props.headerHovered ? classes.hovered : classes.transparent);
+  var visibilityStyle = !props.filterLevel && (props.headerHovered ? styles.hovered : styles.transparent);
   return /*#__PURE__*/_react["default"].createElement(_FilterAltOutlined["default"], {
     onClick: props.onClick,
-    className: (0, _clsx["default"])(classes.filterButton, props.filterLevel > 1 && classes.filterTooLossy, visibilityClass)
+    sx: (0, _styles.mergeSx)(styles.filterButton, props.filterLevel > 1 && styles.filterTooLossy, visibilityStyle)
   });
 };
 var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
@@ -94,7 +93,6 @@ var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
     onFilterClick = props.onFilterClick,
     onContextMenu = props.onContextMenu,
     style = props.style;
-  var classes = useStyles();
   var _React$useState = _react["default"].useState(),
     hovered = _React$useState[0],
     setHovered = _React$useState[1];
@@ -110,16 +108,17 @@ var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
       onFilterClick(evt, topmostDiv.current);
     };
   }, [onFilterClick]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     ref: topmostDiv,
     onMouseEnter: onHover,
     onMouseLeave: onHover,
-    className: (0, _clsx["default"])(classes.divFlex, numeric && classes.divNum, className),
+    sx: (0, _styles.mergeSx)(styles.divFlex, numeric && styles.divNum),
+    className: className,
     style: style,
     onContextMenu: onContextMenu
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     ref: ref,
-    className: (0, _clsx["default"])(classes.label)
+    sx: styles.label
   }, label), onSortClick && /*#__PURE__*/_react["default"].createElement(SortButton, {
     headerHovered: hovered,
     onClick: onSortClick,
@@ -131,5 +130,5 @@ var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
   }));
 });
 exports.ColumnHeader = ColumnHeader;
-var _default = ColumnHeader;
+var _default = (0, _system.styled)(ColumnHeader)({});
 exports["default"] = _default;