@pie-lib/charting 5.32.8-next.2 → 5.33.0-mui-update.0

package/lib/axes.js

@@ -1,92 +1,131 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TickComponent = exports.RawChartAxes = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _axis = require("@vx/axis");
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _plot = require("@pie-lib/plot");
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _correctnessIndicators = require("./common/correctness-indicators");
-
 var _utils = require("./utils");
-
 var _markLabel = _interopRequireDefault(require("./mark-label"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var StyledErrorText = (0, _styles.styled)('text')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.typography.fontSize - 2,
+    fill: theme.palette.error.main
+  };
+});
+var StyledCheckbox = (0, _styles.styled)(_Checkbox["default"])(function () {
+  return {
+    color: "".concat(_renderUi.color.tertiary(), " !important")
+  };
+});
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 TickComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(TickComponent, _React$Component);
-
-  var _super = _createSuper(TickComponent);
+// TODO: check if this styling works as intended once MUI migration is done
+// Styled components for axis elements
+var StyledAxisLeft = (0, _styles.styled)(_axis.AxisLeft)(function () {
+  return {
+    stroke: _renderUi.color.primaryDark(),
+    strokeWidth: 2,
+    '& .vx-axis-line': {
+      stroke: _renderUi.color.visualElementsColors.AXIS_LINE_COLOR,
+      strokeWidth: 2
+    },
+    '& .vx-axis-tick': {
+      '& > line': {
+        stroke: _renderUi.color.primaryDark(),
+        strokeWidth: 2
+      }
+    }
+  };
+});
+var StyledAxisBottom = (0, _styles.styled)(_axis.AxisBottom)(function (_ref2) {
+  var _theme$typography$bod;
+  var theme = _ref2.theme;
+  return {
+    stroke: _renderUi.color.primaryDark(),
+    strokeWidth: 2,
+    '& .vx-axis-line': {
+      stroke: _renderUi.color.visualElementsColors.AXIS_LINE_COLOR,
+      strokeWidth: 2
+    },
+    '& .vx-axis-tick': {
+      '& > line': {
+        stroke: _renderUi.color.primaryDark(),
+        strokeWidth: 2
+      },
+      fontFamily: (_theme$typography$bod = theme.typography.body1) === null || _theme$typography$bod === void 0 ? void 0 : _theme$typography$bod.fontFamily,
+      fontSize: theme.typography.fontSize,
+      textAnchor: 'middle'
+    }
+  };
+});
 
+// Styled components for correctness indicators
+var correctnessIconStyles = function correctnessIconStyles(theme) {
+  return {
+    borderRadius: theme.spacing(2),
+    color: _renderUi.color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: "1px solid ".concat(_renderUi.color.defaults.WHITE),
+    boxSizing: 'unset' // to override the default border-box in IBX
+  };
+};
+var incorrectIconStyles = {
+  backgroundColor: _renderUi.color.incorrectWithIcon()
+};
+var correctIconStyles = {
+  backgroundColor: _renderUi.color.correct()
+};
+var TickComponent = exports.TickComponent = /*#__PURE__*/function (_React$Component) {
   function TickComponent(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, TickComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, callback) {
+    _this = _callSuper(this, TickComponent, [props]);
+    (0, _defineProperty2["default"])(_this, "handleAlertDialog", function (open, callback) {
       return _this.setState({
         dialog: {
           open: open
         }
       }, callback);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCategory", function (index, newLabel) {
+    (0, _defineProperty2["default"])(_this, "changeCategory", function (index, newLabel) {
       var _this$props = _this.props,
-          categories = _this$props.categories,
-          onChangeCategory = _this$props.onChangeCategory;
+        categories = _this$props.categories,
+        onChangeCategory = _this$props.onChangeCategory;
       var category = categories[index];
       onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
         label: newLabel
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeInteractive", function (index, value) {
+    (0, _defineProperty2["default"])(_this, "changeInteractive", function (index, value) {
       var _this$props2 = _this.props,
-          categories = _this$props2.categories,
-          onChangeCategory = _this$props2.onChangeCategory;
+        categories = _this$props2.categories,
+        onChangeCategory = _this$props2.onChangeCategory;
       var category = categories[index];
-
       if (!value) {
         _this.setState({
           dialog: {
@@ -109,12 +148,11 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
         }));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeEditable", function (index, value) {
+    (0, _defineProperty2["default"])(_this, "changeEditable", function (index, value) {
       var _this$props3 = _this.props,
-          categories = _this$props3.categories,
-          onChangeCategory = _this$props3.onChangeCategory;
+        categories = _this$props3.categories,
+        onChangeCategory = _this$props3.onChangeCategory;
       var category = categories[index];
-
       if (!value) {
         _this.setState({
           dialog: {
@@ -137,26 +175,21 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
         }));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "splitText", function (text, maxChar) {
+    (0, _defineProperty2["default"])(_this, "splitText", function (text, maxChar) {
       var chunks = [];
-
       while ((text || '').length > 0) {
         var indexToSplit = void 0;
-
         if (text.length > maxChar) {
           indexToSplit = text.lastIndexOf(' ', maxChar);
-
           if (indexToSplit === -1) {
             indexToSplit = maxChar;
           }
         } else {
           indexToSplit = text.length;
         }
-
         chunks.push(text.substring(0, indexToSplit));
         text = text.substring(indexToSplit).trim();
       }
-
       return chunks;
     });
     _this.state = {
@@ -166,8 +199,8 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
-  (0, _createClass2["default"])(TickComponent, [{
+  (0, _inherits2["default"])(TickComponent, _React$Component);
+  return (0, _createClass2["default"])(TickComponent, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.autoFocus && !prevProps.autoFocus) {
@@ -178,47 +211,46 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          categories = _this$props4.categories,
-          xBand = _this$props4.xBand,
-          bandWidth = _this$props4.bandWidth,
-          barWidth = _this$props4.barWidth,
-          rotate = _this$props4.rotate,
-          top = _this$props4.top,
-          graphProps = _this$props4.graphProps,
-          defineChart = _this$props4.defineChart,
-          chartingOptions = _this$props4.chartingOptions,
-          x = _this$props4.x,
-          y = _this$props4.y,
-          formattedValue = _this$props4.formattedValue,
-          changeInteractiveEnabled = _this$props4.changeInteractiveEnabled,
-          changeEditableEnabled = _this$props4.changeEditableEnabled,
-          error = _this$props4.error,
-          autoFocus = _this$props4.autoFocus,
-          hiddenLabelRef = _this$props4.hiddenLabelRef,
-          showCorrectness = _this$props4.showCorrectness;
-
+        categories = _this$props4.categories,
+        xBand = _this$props4.xBand,
+        bandWidth = _this$props4.bandWidth,
+        barWidth = _this$props4.barWidth,
+        rotate = _this$props4.rotate,
+        top = _this$props4.top,
+        graphProps = _this$props4.graphProps,
+        defineChart = _this$props4.defineChart,
+        chartingOptions = _this$props4.chartingOptions,
+        x = _this$props4.x,
+        y = _this$props4.y,
+        formattedValue = _this$props4.formattedValue,
+        changeInteractiveEnabled = _this$props4.changeInteractiveEnabled,
+        changeEditableEnabled = _this$props4.changeEditableEnabled,
+        error = _this$props4.error,
+        autoFocus = _this$props4.autoFocus,
+        hiddenLabelRef = _this$props4.hiddenLabelRef,
+        showCorrectness = _this$props4.showCorrectness;
       if (!formattedValue) {
         return null;
       }
 
+      // Create classes object for TickCorrectnessIndicator compatibility
+      var classes = {
+        correctnessIcon: correctnessIconStyles,
+        incorrectIcon: incorrectIconStyles,
+        correctIcon: correctIconStyles
+      };
       var dialog = this.state.dialog;
-
-      var _ref = chartingOptions || {},
-          changeEditable = _ref.changeEditable,
-          changeInteractive = _ref.changeInteractive;
-
+      var _ref3 = chartingOptions || {},
+        changeEditable = _ref3.changeEditable,
+        changeInteractive = _ref3.changeInteractive;
       var index = parseInt(formattedValue.split('-')[0], 10);
       var category = categories[index];
-
-      var _ref2 = category || {},
-          editable = _ref2.editable,
-          interactive = _ref2.interactive,
-          label = _ref2.label,
-          correctness = _ref2.correctness;
-
+      var _ref4 = category || {},
+        editable = _ref4.editable,
+        interactive = _ref4.interactive,
+        label = _ref4.label,
+        correctness = _ref4.correctness;
       var barX = xBand((0, _utils.bandKey)({
         label: label
       }, index));
@@ -265,8 +297,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
           interactive: interactive,
           classes: classes
         })
-      })), error && index === 0 && /*#__PURE__*/_react["default"].createElement("text", {
-        className: classes.error,
+      })), error && index === 0 && /*#__PURE__*/_react["default"].createElement(StyledErrorText, {
         y: y + 23,
         height: 6,
         textAnchor: "start"
@@ -318,8 +349,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
           pointerEvents: 'visible',
           overflow: 'visible'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-        className: classes.customColor,
+      }, /*#__PURE__*/_react["default"].createElement(StyledCheckbox, {
         style: {
           position: 'fixed'
         },
@@ -336,8 +366,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
           pointerEvents: 'visible',
           overflow: 'visible'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-        className: classes.customColor,
+      }, /*#__PURE__*/_react["default"].createElement(StyledCheckbox, {
         style: {
           position: 'fixed'
         },
@@ -363,10 +392,7 @@ var TickComponent = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-  return TickComponent;
 }(_react["default"].Component);
-
-exports.TickComponent = TickComponent;
 (0, _defineProperty2["default"])(TickComponent, "propTypes", {
   defineChart: _propTypes["default"].bool,
   error: _propTypes["default"].any
@@ -384,7 +410,6 @@ TickComponent.propTypes = {
   formattedValue: _propTypes["default"].string,
   onChangeCategory: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
-  classes: _propTypes["default"].object,
   error: _propTypes["default"].object,
   defineChart: _propTypes["default"].bool,
   chartingOptions: _propTypes["default"].object,
@@ -394,45 +419,36 @@ TickComponent.propTypes = {
   onAutoFocusUsed: _propTypes["default"].func,
   showCorrectness: _propTypes["default"].bool
 };
-
-var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
-  (0, _inherits2["default"])(RawChartAxes, _React$Component2);
-
-  var _super2 = _createSuper(RawChartAxes);
-
+var RawChartAxes = exports.RawChartAxes = /*#__PURE__*/function (_React$Component2) {
   function RawChartAxes() {
     var _this3;
-
     (0, _classCallCheck2["default"])(this, RawChartAxes);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
+    _this3 = _callSuper(this, RawChartAxes, [].concat(args));
+    (0, _defineProperty2["default"])(_this3, "state", {
       height: 0,
       width: 0
     });
     return _this3;
   }
-
-  (0, _createClass2["default"])(RawChartAxes, [{
+  (0, _inherits2["default"])(RawChartAxes, _React$Component2);
+  return (0, _createClass2["default"])(RawChartAxes, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.hiddenLabelRef) {
         var boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
-        var hiddenEl = this.hiddenLabelRef.current; // same logic used in dropdown.jsx for hidden labels width calculation
+        var hiddenEl = this.hiddenLabelRef.current;
 
+        // same logic used in dropdown.jsx for hidden labels width calculation
         if (hiddenEl) {
           var containsLatex = hiddenEl.querySelector('[data-latex], [data-raw]');
           var hasMathJax = hiddenEl.querySelector('mjx-container');
           var mathHandled = hiddenEl.querySelector('[data-math-handled="true"]');
-
           if (containsLatex && (!mathHandled || !hasMathJax)) {
             (0, _mathRendering.renderMath)(this.hiddenLabelRef);
           }
-
           this.setState({
             height: Math.floor(boundingClientRect.height),
             width: Math.floor(boundingClientRect.width)
@@ -445,7 +461,6 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
     value: function componentDidUpdate(prevProps, prevState, snapshot) {
       if (this.hiddenLabelRef) {
         var width = Math.floor(this.hiddenLabelRef.getBoundingClientRect().width);
-
         if (width !== this.state.width) {
           this.setState({
             width: width
@@ -457,69 +472,59 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
     key: "render",
     value: function render() {
       var _this4 = this;
-
       var _this$props5 = this.props,
-          classes = _this$props5.classes,
-          graphProps = _this$props5.graphProps,
-          xBand = _this$props5.xBand,
-          leftAxis = _this$props5.leftAxis,
-          onChange = _this$props5.onChange,
-          onChangeCategory = _this$props5.onChangeCategory,
-          _this$props5$categori = _this$props5.categories,
-          categories = _this$props5$categori === void 0 ? [] : _this$props5$categori,
-          top = _this$props5.top,
-          defineChart = _this$props5.defineChart,
-          chartingOptions = _this$props5.chartingOptions,
-          changeInteractiveEnabled = _this$props5.changeInteractiveEnabled,
-          changeEditableEnabled = _this$props5.changeEditableEnabled,
-          theme = _this$props5.theme,
-          autoFocus = _this$props5.autoFocus,
-          onAutoFocusUsed = _this$props5.onAutoFocusUsed,
-          error = _this$props5.error,
-          showCorrectness = _this$props5.showCorrectness;
-      var axis = classes.axis,
-          axisLine = classes.axisLine,
-          tick = classes.tick;
-
-      var _ref3 = graphProps || {},
-          _ref3$scale = _ref3.scale,
-          scale = _ref3$scale === void 0 ? {} : _ref3$scale,
-          _ref3$range = _ref3.range,
-          range = _ref3$range === void 0 ? {} : _ref3$range,
-          _ref3$domain = _ref3.domain,
-          domain = _ref3$domain === void 0 ? {} : _ref3$domain,
-          _ref3$size = _ref3.size,
-          size = _ref3$size === void 0 ? {} : _ref3$size;
-
+        graphProps = _this$props5.graphProps,
+        xBand = _this$props5.xBand,
+        leftAxis = _this$props5.leftAxis,
+        onChange = _this$props5.onChange,
+        onChangeCategory = _this$props5.onChangeCategory,
+        _this$props5$categori = _this$props5.categories,
+        categories = _this$props5$categori === void 0 ? [] : _this$props5$categori,
+        top = _this$props5.top,
+        defineChart = _this$props5.defineChart,
+        chartingOptions = _this$props5.chartingOptions,
+        changeInteractiveEnabled = _this$props5.changeInteractiveEnabled,
+        changeEditableEnabled = _this$props5.changeEditableEnabled,
+        theme = _this$props5.theme,
+        autoFocus = _this$props5.autoFocus,
+        onAutoFocusUsed = _this$props5.onAutoFocusUsed,
+        error = _this$props5.error,
+        showCorrectness = _this$props5.showCorrectness;
+      var _ref5 = graphProps || {},
+        _ref5$scale = _ref5.scale,
+        scale = _ref5$scale === void 0 ? {} : _ref5$scale,
+        _ref5$range = _ref5.range,
+        range = _ref5$range === void 0 ? {} : _ref5$range,
+        _ref5$domain = _ref5.domain,
+        domain = _ref5$domain === void 0 ? {} : _ref5$domain,
+        _ref5$size = _ref5.size,
+        size = _ref5$size === void 0 ? {} : _ref5$size;
       var _this$state = this.state,
-          height = _this$state.height,
-          width = _this$state.width;
+        height = _this$state.height,
+        width = _this$state.width;
       var bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
-      var bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
-
+      var bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();
+      // for chartType "line", bandWidth will be 0, so we have to calculate it
       var barWidth = bandWidth || scale.x && scale.x(domain.max) / categories.length;
       var rowTickValues = (0, _utils.getTickValues)(_objectSpread(_objectSpread({}, range), {}, {
         step: range.labelStep
       }));
-      var fontSize = theme && theme.typography ? theme.typography.fontSize : 14; // this mostly applies for labels that are not editable
-
-      var rotateBecauseOfHeight = (0, _utils.getRotateAngle)(fontSize, height); // this applies for labels that are editable
-
+      var fontSize = theme && theme.typography ? theme.typography.fontSize : 14;
+      // this mostly applies for labels that are not editable
+      var rotateBecauseOfHeight = (0, _utils.getRotateAngle)(fontSize, height);
+      // this applies for labels that are editable
       var rotateBecauseOfWidth = width > barWidth ? 25 : 0;
-
       var getTickLabelProps = function getTickLabelProps(value) {
         return {
           dy: 4,
           dx: -10 - (value.toLocaleString().length || 1) * 5
         };
       };
-
       var getTickComponent = function getTickComponent(props) {
         var properties = {
           hiddenLabelRef: function hiddenLabelRef(ref) {
             _this4.hiddenLabelRef = ref;
           },
-          classes: classes,
           categories: categories,
           xBand: xBand,
           bandWidth: bandWidth,
@@ -543,21 +548,15 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
         };
         return /*#__PURE__*/_react["default"].createElement(TickComponent, properties);
       };
-
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftAxis && /*#__PURE__*/_react["default"].createElement(_axis.AxisLeft, {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, leftAxis && /*#__PURE__*/_react["default"].createElement(StyledAxisLeft, {
         scale: scale.y,
-        className: axis,
-        axisLineClassName: axisLine,
         tickLength: 10,
-        tickClassName: tick,
         tickFormat: function tickFormat(value) {
           return value;
         },
         tickValues: rowTickValues,
         tickLabelProps: getTickLabelProps
-      }), /*#__PURE__*/_react["default"].createElement(_axis.AxisBottom, {
-        axisLineClassName: axisLine,
-        tickClassName: tick,
+      }), /*#__PURE__*/_react["default"].createElement(StyledAxisBottom, {
         scale: bottomScale,
         labelProps: {
           y: 60 + top
@@ -577,13 +576,9 @@ var RawChartAxes = /*#__PURE__*/function (_React$Component2) {
       }));
     }
   }]);
-  return RawChartAxes;
 }(_react["default"].Component);
-
-exports.RawChartAxes = RawChartAxes;
 (0, _defineProperty2["default"])(RawChartAxes, "propTypes", {
   bottomScale: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired,
   categories: _propTypes["default"].array,
   defineChart: _propTypes["default"].bool,
   error: _propTypes["default"].any,
@@ -601,62 +596,9 @@ exports.RawChartAxes = RawChartAxes;
   onAutoFocusUsed: _propTypes["default"].func,
   showCorrectness: _propTypes["default"].bool
 });
-var ChartAxes = (0, _styles.withStyles)(function (theme) {
-  return {
-    axis: {
-      stroke: _renderUi.color.primaryDark(),
-      strokeWidth: 2
-    },
-    axisLine: {
-      stroke: _renderUi.color.visualElementsColors.AXIS_LINE_COLOR,
-      strokeWidth: 2
-    },
-    tick: {
-      '& > line': {
-        stroke: _renderUi.color.primaryDark(),
-        strokeWidth: 2
-      },
-      fontFamily: theme.typography.body1.fontFamily,
-      fontSize: theme.typography.fontSize,
-      textAnchor: 'middle'
-    },
-    dottedLine: {
-      stroke: _renderUi.color.primaryLight(),
-      opacity: 0.2
-    },
-    error: {
-      fontSize: theme.typography.fontSize - 2,
-      fill: theme.palette.error.main
-    },
-    customColor: {
-      color: "".concat(_renderUi.color.tertiary(), " !important")
-    },
-    correctnessIcon: {
-      borderRadius: theme.spacing.unit * 2,
-      color: _renderUi.color.defaults.WHITE,
-      fontSize: '16px',
-      width: '16px',
-      height: '16px',
-      padding: '2px',
-      border: "1px solid ".concat(_renderUi.color.defaults.WHITE),
-      boxSizing: 'unset' // to override the default border-box in IBX
-
-    },
-    incorrectIcon: {
-      backgroundColor: _renderUi.color.incorrectWithIcon()
-    },
-    correctIcon: {
-      backgroundColor: _renderUi.color.correct()
-    },
-    tickContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
-    }
-  };
-}, {
-  withTheme: true
-})(RawChartAxes);
-var _default = ChartAxes;
-exports["default"] = _default;
+var ChartAxes = (0, _styles.styled)(RawChartAxes)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {};
+});
+var _default = exports["default"] = ChartAxes;
 //# sourceMappingURL=axes.js.map