@pie-lib/graphing 2.34.2-next.0 → 2.36.0-mui-update.0

package/lib/grid-setup.js

@@ -1,57 +1,118 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _styles = require("@material-ui/core/styles");
-
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
-
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
+var _material = require("@mui/material");
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _configUi = require("@pie-lib/config-ui");
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-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; }
-
+var _styles = require("@mui/material/styles");
+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; }
+var Wrapper = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: '450px'
+  };
+});
+var Content = (0, _styles.styled)('div')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+  };
+});
+var ColumnView = (0, _styles.styled)('div')(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  };
+});
+var RowView = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  };
+});
+var TextFieldSmall = (0, _styles.styled)('div')(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    width: '130px',
+    margin: "".concat(theme.spacing(1), " ").concat(theme.spacing(0.5))
+  };
+});
+var TextFieldMedium = (0, _styles.styled)('div')(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    width: '160px',
+    margin: "".concat(theme.spacing(1), " ").concat(theme.spacing(0.5)),
+    '& .MuiFormControl-root': {
+      width: '100%'
+    }
+  };
+});
+var TextFieldLarge = (0, _styles.styled)('div')(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    width: '230px',
+    margin: "".concat(theme.spacing(1), " ").concat(theme.spacing(0.5)),
+    '& .MuiFormControl-root': {
+      width: '100%'
+    }
+  };
+});
+var ItalicText = (0, _styles.styled)(_material.Typography)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    fontStyle: 'italic',
+    margin: "".concat(theme.spacing(1), " 0")
+  };
+});
+var Dimensions = (0, _styles.styled)('div')(function (_ref9) {
+  var theme = _ref9.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  };
+});
+var DisabledText = (0, _styles.styled)(_material.Typography)(function (_ref0) {
+  var theme = _ref0.theme;
+  return {
+    color: _renderUi.color.disabled()
+  };
+});
+var AxisLabel = (0, _styles.styled)('div')(function (_ref1) {
+  var theme = _ref1.theme;
+  return {
+    paddingTop: theme.spacing(2)
+  };
+});
 var GridConfig = function GridConfig(props) {
-  var classes = props.classes,
-      disabled = props.disabled,
-      displayedFields = props.displayedFields,
-      labelValue = props.labelValue,
-      labelValues = props.labelValues,
-      gridValue = props.gridValue,
-      gridValues = props.gridValues,
-      _onChange = props.onChange;
+  var disabled = props.disabled,
+    displayedFields = props.displayedFields,
+    labelValue = props.labelValue,
+    labelValues = props.labelValues,
+    gridValue = props.gridValue,
+    gridValues = props.gridValues,
+    _onChange = props.onChange;
   var _displayedFields$labe = displayedFields.labelStep,
-      labelStep = _displayedFields$labe === void 0 ? {} : _displayedFields$labe,
-      _displayedFields$step = displayedFields.step,
-      step = _displayedFields$step === void 0 ? {} : _displayedFields$step;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.columnView
-  }, step && step.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.mediumTextField,
+    labelStep = _displayedFields$labe === void 0 ? {} : _displayedFields$labe,
+    _displayedFields$step = displayedFields.step,
+    step = _displayedFields$step === void 0 ? {} : _displayedFields$step;
+  return /*#__PURE__*/_react["default"].createElement(ColumnView, null, step && step.enabled && /*#__PURE__*/_react["default"].createElement(TextFieldMedium, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: step.label || '',
     value: gridValue,
     customValues: gridValues,
@@ -60,8 +121,7 @@ var GridConfig = function GridConfig(props) {
     onChange: function onChange(e, v) {
       return _onChange('step', v);
     }
-  }), labelStep && labelStep.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.mediumTextField,
+  })), labelStep && labelStep.enabled && /*#__PURE__*/_react["default"].createElement(TextFieldMedium, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: labelStep.label || '',
     value: labelValue,
     customValues: labelValues,
@@ -70,11 +130,9 @@ var GridConfig = function GridConfig(props) {
     onChange: function onChange(e, v) {
       return _onChange('labelStep', v);
     }
-  }));
+  })));
 };
-
 GridConfig.propTypes = {
-  classes: _propTypes["default"].object,
   disabled: _propTypes["default"].bool,
   displayedFields: _propTypes["default"].object,
   labelValue: _propTypes["default"].number,
@@ -83,31 +141,25 @@ GridConfig.propTypes = {
   gridValues: _propTypes["default"].array,
   onChange: _propTypes["default"].func
 };
-
 var AxisConfig = function AxisConfig(props) {
-  var classes = props.classes,
-      disabled = props.disabled,
-      displayedFields = props.displayedFields,
-      displayHeader = props.displayHeader,
-      label = props.label,
-      maxValue = props.maxValue,
-      minValue = props.minValue,
-      _onChange2 = props.onChange,
-      type = props.type;
+  var disabled = props.disabled,
+    displayedFields = props.displayedFields,
+    displayHeader = props.displayHeader,
+    label = props.label,
+    maxValue = props.maxValue,
+    minValue = props.minValue,
+    _onChange2 = props.onChange,
+    type = props.type;
   var _displayedFields$axis = displayedFields.axisLabel,
-      axisLabel = _displayedFields$axis === void 0 ? {} : _displayedFields$axis,
-      _displayedFields$min = displayedFields.min,
-      min = _displayedFields$min === void 0 ? {} : _displayedFields$min,
-      _displayedFields$max = displayedFields.max,
-      max = _displayedFields$max === void 0 ? {} : _displayedFields$max;
-  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
-  ];
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.columnView
-  }, displayHeader && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    axisLabel = _displayedFields$axis === void 0 ? {} : _displayedFields$axis,
+    _displayedFields$min = displayedFields.min,
+    min = _displayedFields$min === void 0 ? {} : _displayedFields$min,
+    _displayedFields$max = displayedFields.max,
+    max = _displayedFields$max === void 0 ? {} : _displayedFields$max;
+  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough'];
+  return /*#__PURE__*/_react["default"].createElement(ColumnView, null, displayHeader && /*#__PURE__*/_react["default"].createElement(_material.Typography, {
     variant: "subtitle2"
-  }, /*#__PURE__*/_react["default"].createElement("i", null, type === 'domain' ? 'x' : 'y'), "-axis"), min && min.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.mediumTextField,
+  }, /*#__PURE__*/_react["default"].createElement("i", null, type === 'domain' ? 'x' : 'y'), "-axis"), min && min.enabled && /*#__PURE__*/_react["default"].createElement(TextFieldMedium, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: min.label || '',
     value: minValue,
     min: -10000,
@@ -117,8 +169,7 @@ var AxisConfig = function AxisConfig(props) {
     onChange: function onChange(e, v) {
       return _onChange2('min', v);
     }
-  }), max && max.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.mediumTextField,
+  })), max && max.enabled && /*#__PURE__*/_react["default"].createElement(TextFieldMedium, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: max.label || '',
     value: maxValue,
     min: minValue + 0.05,
@@ -128,22 +179,18 @@ var AxisConfig = function AxisConfig(props) {
     onChange: function onChange(e, v) {
       return _onChange2('max', v);
     }
-  }), axisLabel && axisLabel.enabled && /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-    label: axisLabel.label || '',
-    className: classes.mediumTextField
-  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-    className: classes.axisLabel,
+  })), axisLabel && axisLabel.enabled && /*#__PURE__*/_react["default"].createElement(TextFieldMedium, null, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+    label: axisLabel.label || ''
+  }, /*#__PURE__*/_react["default"].createElement(AxisLabel, null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
     onChange: function onChange(value) {
       return _onChange2('axisLabel', value);
     },
     markup: label || '',
     charactersLimit: 5,
     activePlugins: activePlugins
-  })));
+  })))));
 };
-
 AxisConfig.propTypes = {
-  classes: _propTypes["default"].object,
   disabled: _propTypes["default"].bool,
   displayedFields: _propTypes["default"].object,
   displayHeader: _propTypes["default"].bool,
@@ -153,43 +200,39 @@ AxisConfig.propTypes = {
   type: _propTypes["default"].string,
   onChange: _propTypes["default"].func
 };
-
 var GridSetup = function GridSetup(props) {
-  var classes = props.classes,
-      domain = props.domain,
-      _props$displayedField = props.displayedFields,
-      displayedFields = _props$displayedField === void 0 ? {} : _props$displayedField,
-      _props$gridValues = props.gridValues,
-      gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
-      includeAxes = props.includeAxes,
-      _props$labelValues = props.labelValues,
-      labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
-      onChange = props.onChange,
-      onChangeView = props.onChangeView,
-      range = props.range,
-      size = props.size,
-      sizeConstraints = props.sizeConstraints,
-      standardGrid = props.standardGrid;
+  var domain = props.domain,
+    _props$displayedField = props.displayedFields,
+    displayedFields = _props$displayedField === void 0 ? {} : _props$displayedField,
+    _props$gridValues = props.gridValues,
+    gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
+    includeAxes = props.includeAxes,
+    _props$labelValues = props.labelValues,
+    labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
+    onChange = props.onChange,
+    onChangeView = props.onChangeView,
+    range = props.range,
+    size = props.size,
+    sizeConstraints = props.sizeConstraints,
+    standardGrid = props.standardGrid;
   var gridProps = {
     min: 2,
     max: 41
   };
-
-  var _ref = displayedFields || {},
-      _ref$axisLabel = _ref.axisLabel,
-      axisLabel = _ref$axisLabel === void 0 ? {} : _ref$axisLabel,
-      dimensionsEnabled = _ref.dimensionsEnabled,
-      includeAxesEnabled = _ref.includeAxesEnabled,
-      _ref$labelStep = _ref.labelStep,
-      labelStep = _ref$labelStep === void 0 ? {} : _ref$labelStep,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? {} : _ref$min,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? {} : _ref$max,
-      standardGridEnabled = _ref.standardGridEnabled,
-      _ref$step = _ref.step,
-      step = _ref$step === void 0 ? {} : _ref$step;
-
+  var _ref10 = displayedFields || {},
+    _ref10$axisLabel = _ref10.axisLabel,
+    axisLabel = _ref10$axisLabel === void 0 ? {} : _ref10$axisLabel,
+    dimensionsEnabled = _ref10.dimensionsEnabled,
+    includeAxesEnabled = _ref10.includeAxesEnabled,
+    _ref10$labelStep = _ref10.labelStep,
+    labelStep = _ref10$labelStep === void 0 ? {} : _ref10$labelStep,
+    _ref10$min = _ref10.min,
+    min = _ref10$min === void 0 ? {} : _ref10$min,
+    _ref10$max = _ref10.max,
+    max = _ref10$max === void 0 ? {} : _ref10$max,
+    standardGridEnabled = _ref10.standardGridEnabled,
+    _ref10$step = _ref10.step,
+    step = _ref10$step === void 0 ? {} : _ref10$step;
   var displayAxisType = min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
   var gridConfigFields = {
     step: step,
@@ -200,7 +243,6 @@ var GridSetup = function GridSetup(props) {
     max: max,
     axisLabel: axisLabel
   };
-
   var onIncludeAxes = function onIncludeAxes(includeAxes) {
     var noAxesConfig = function noAxesConfig(type) {
       var axis = type === 'domain' ? domain : range;
@@ -211,22 +253,18 @@ var GridSetup = function GridSetup(props) {
         labelStep: 0
       };
     };
-
     var updatedRange = _objectSpread(_objectSpread({}, range), includeAxes ? {
       labelStep: 1
     } : noAxesConfig('range'));
-
     var updatedDomain = _objectSpread(_objectSpread({}, domain), includeAxes ? {
       labelStep: 1
     } : noAxesConfig('domain'));
-
     onChange({
       includeAxes: includeAxes,
       range: updatedRange,
       domain: updatedDomain
     });
   };
-
   var onStandardGridChanged = function onStandardGridChanged(value) {
     onChange({
       standardGrid: value,
@@ -238,43 +276,28 @@ var GridSetup = function GridSetup(props) {
       })
     });
   };
-
   var onSizeChanged = function onSizeChanged(key, value) {
     var graph = _objectSpread(_objectSpread({}, size), {}, (0, _defineProperty2["default"])({}, key, value));
-
-    if (standardGrid) {
-      graph.height = value;
-    }
-
+    if (standardGrid) graph.height = value;
     onChange({
       graph: graph
     });
   };
-
   var onDomainChanged = function onDomainChanged(key, value) {
     domain[key] = value;
-
-    if (standardGrid && key !== 'axisLabel') {
-      range[key] = value;
-    }
-
+    if (standardGrid && key !== 'axisLabel') range[key] = value;
     onChange({
       domain: domain,
       range: range
     });
   };
-
   var onRangeChanged = function onRangeChanged(key, value) {
     range[key] = value;
     onChange({
       range: range
     });
   };
-
-  var axesConfig = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.rowView
-  }, /*#__PURE__*/_react["default"].createElement(AxisConfig, {
-    classes: classes,
+  var axesConfig = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(RowView, null, /*#__PURE__*/_react["default"].createElement(AxisConfig, {
     displayedFields: axisConfigFields,
     displayHeader: displayAxisType,
     type: "domain",
@@ -284,7 +307,6 @@ var GridSetup = function GridSetup(props) {
     includeAxes: includeAxes,
     onChange: onDomainChanged
   }), /*#__PURE__*/_react["default"].createElement(AxisConfig, {
-    classes: classes,
     displayedFields: axisConfigFields,
     displayHeader: displayAxisType,
     type: "range",
@@ -294,12 +316,7 @@ var GridSetup = function GridSetup(props) {
     disabled: standardGrid,
     includeAxes: includeAxes,
     onChange: onRangeChanged
-  })), (min.enabled || max.enabled) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.text
-  }, "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value"), (step.enabled || labelStep.enabled) && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.rowView
-  }, /*#__PURE__*/_react["default"].createElement(GridConfig, {
-    classes: classes,
+  })), (min.enabled || max.enabled) && /*#__PURE__*/_react["default"].createElement(ItalicText, null, "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value"), (step.enabled || labelStep.enabled) && /*#__PURE__*/_react["default"].createElement(RowView, null, /*#__PURE__*/_react["default"].createElement(GridConfig, {
     displayedFields: gridConfigFields,
     gridValue: domain.step,
     labelValue: domain.labelStep,
@@ -307,7 +324,6 @@ var GridSetup = function GridSetup(props) {
     labelValues: labelValues.domain || [],
     onChange: onDomainChanged
   }), /*#__PURE__*/_react["default"].createElement(GridConfig, {
-    classes: classes,
     disabled: standardGrid,
     displayedFields: gridConfigFields,
     gridValue: range.step,
@@ -315,14 +331,8 @@ var GridSetup = function GridSetup(props) {
     gridValues: gridValues.range || [],
     labelValues: labelValues.range || [],
     onChange: onRangeChanged
-  })), labelStep.enabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.text
-  }, "For unnumbered gridlines, enter a label interval of 0"));
-
-  var gridlinesConfig = max.enabled ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.columnView
-  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.largeTextField,
+  })), labelStep.enabled && /*#__PURE__*/_react["default"].createElement(ItalicText, null, "For unnumbered gridlines, enter a label interval of 0"));
+  var gridlinesConfig = max.enabled ? /*#__PURE__*/_react["default"].createElement(ColumnView, null, /*#__PURE__*/_react["default"].createElement(TextFieldLarge, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: "Number of Vertical Gridlines",
     value: domain.max,
     min: !includeAxes && gridProps.min,
@@ -331,8 +341,7 @@ var GridSetup = function GridSetup(props) {
     onChange: function onChange(e, v) {
       return onDomainChanged('max', v);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.largeTextField,
+  })), /*#__PURE__*/_react["default"].createElement(TextFieldLarge, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: "Number of Horizontal Gridlines",
     value: range.max,
     min: !includeAxes && gridProps.min,
@@ -342,18 +351,20 @@ var GridSetup = function GridSetup(props) {
     onChange: function onChange(e, v) {
       return onRangeChanged('max', v);
     }
-  })) : null;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.wrapper
-  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], {
-    onChange: onChangeView
-  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
+  }))) : null;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_material.Accordion, {
+    onChange: onChangeView,
+    TransitionProps: {
+      timeout: {
+        enter: 225,
+        exit: 195
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_material.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
     variant: "subtitle1"
-  }, "Customize Grid Setup")), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.content
-  }, includeAxesEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.Toggle, {
+  }, "Customize Grid Setup")), /*#__PURE__*/_react["default"].createElement(_material.AccordionDetails, null, /*#__PURE__*/_react["default"].createElement(Content, null, includeAxesEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.Toggle, {
     label: "Include axes and labels?",
     toggle: onIncludeAxes,
     checked: includeAxes
@@ -361,12 +372,7 @@ var GridSetup = function GridSetup(props) {
     label: "Constrain to standard coordinate grid?",
     toggle: onStandardGridChanged,
     checked: standardGrid
-  }), includeAxes ? axesConfig : gridlinesConfig, dimensionsEnabled && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.dimensions
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.disabled
-  }, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+  }), includeAxes ? axesConfig : gridlinesConfig, dimensionsEnabled && /*#__PURE__*/_react["default"].createElement(Dimensions, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.Typography, null, "Dimensions(px)"), /*#__PURE__*/_react["default"].createElement(DisabledText, null, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), /*#__PURE__*/_react["default"].createElement(TextFieldSmall, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: "Width",
     value: size.width,
     min: sizeConstraints.min,
@@ -376,8 +382,7 @@ var GridSetup = function GridSetup(props) {
     onChange: function onChange(e, v) {
       return onSizeChanged('width', v);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+  })), /*#__PURE__*/_react["default"].createElement(TextFieldSmall, null, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
     label: "Height",
     value: size.height,
     min: sizeConstraints.min,
@@ -388,11 +393,9 @@ var GridSetup = function GridSetup(props) {
     onChange: function onChange(e, v) {
       return onSizeChanged('height', v);
     }
-  }))))));
+  })))))));
 };
-
 GridSetup.propTypes = {
-  classes: _propTypes["default"].object,
   domain: _propTypes["default"].object,
   displayedFields: _propTypes["default"].object,
   gridValues: _propTypes["default"].object,
@@ -405,58 +408,5 @@ GridSetup.propTypes = {
   sizeConstraints: _propTypes["default"].object,
   standardGrid: _propTypes["default"].bool
 };
-
-var styles = function styles(theme) {
-  return {
-    wrapper: {
-      width: '450px'
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%'
-    },
-    columnView: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center'
-    },
-    rowView: {
-      display: 'flex',
-      justifyContent: 'space-around',
-      alignItems: 'center'
-    },
-    textField: {
-      width: '130px',
-      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    mediumTextField: {
-      width: '160px',
-      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    largeTextField: {
-      width: '230px',
-      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    text: {
-      fontStyle: 'italic',
-      margin: "".concat(theme.spacing.unit, "px 0")
-    },
-    dimensions: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    disabled: {
-      color: _renderUi.color.disabled()
-    },
-    axisLabel: {
-      paddingTop: theme.spacing.unit * 2
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(GridSetup);
-
-exports["default"] = _default;
+var _default = exports["default"] = GridSetup;
 //# sourceMappingURL=grid-setup.js.map