@pie-lib/math-input 6.31.2-next.0 → 6.32.0-mui-update.0

package/lib/keypad/index.js

@@ -1,193 +1,162 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.KeyPad = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _styles = require("@mui/material/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
-
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
-
-var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
 var _lodash = _interopRequireDefault(require("lodash"));
-
 var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
-
 var mq = _interopRequireWildcard(require("../mq"));
-
 var _keys = require("../keys");
-
 var _constants = _interopRequireDefault(require("./../shared/constants"));
-
 var _commonMqStyles = require("../mq/common-mq-styles");
-
 var _keysLayout = require("./keys-layout");
-
-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 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 _colors = require("@mui/material/colors");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; })(); }
+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 log = (0, _debug["default"])('pie-lib:math-inline:keypad');
-var LatexButton = (0, _styles.withStyles)(function (theme) {
+var StyledLatexButton = (0, _styles.styled)(_Button["default"])(function (_ref) {
+  var theme = _ref.theme;
   return {
-    root: {
-      textTransform: 'none',
-      padding: 0,
-      margin: 0,
-      fontSize: '110% !important'
+    textTransform: 'none',
+    padding: 0,
+    margin: 0,
+    fontSize: '110% !important'
+  };
+});
+var LatexButtonContent = (0, _styles.styled)(mq.Static)(function (_ref2) {
+  var theme = _ref2.theme,
+    latex = _ref2.latex;
+  var baseStyles = {
+    pointerEvents: 'none',
+    textTransform: 'none !important',
+    '& .mq-scaled.mq-sqrt-prefix': {
+      transform: 'scale(1, 0.9) !important'
     },
-    latexButton: {
-      pointerEvents: 'none',
-      textTransform: 'none !important',
-      '& .mq-scaled.mq-sqrt-prefix': {
-        transform: 'scale(1, 0.9) !important'
-      },
-      '& .mq-sup-only .mq-sup': {
-        marginBottom: '0.9px !important'
-      },
-      '& .mq-empty': {
-        backgroundColor: "".concat((0, _colorManipulator.fade)(theme.palette.secondary.main, 0.4), " !important")
-      },
-      '& .mq-overline .mq-overline-inner': {
-        borderTop: '2px solid black'
-      },
-      '& .mq-non-leaf.mq-overline': {
-        borderTop: 'none !important' // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
-
-      },
-      '& .mq-overarrow': {
-        width: '30px',
-        marginTop: '0 !important',
-        borderTop: '2px solid black',
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-        '&.mq-arrow-both': {
-          top: '0px !important',
-          '& *': {
-            lineHeight: '1 !important',
-            borderTop: 'none !important' // fixing PD-4873 - in OT, it has border-top 1px and adds extra line,
-
-          },
-          '&:before': {
-            fontSize: '80%',
-            left: 'calc(-13%) !important',
-            top: '-0.31em !important'
-          },
-          '&:after': {
-            fontSize: '80% !important',
-            right: 'calc(-13%) !important',
-            top: '-1.5em'
-          },
-          '&.mq-empty:before': {
-            fontSize: '80%',
-            left: 'calc(-13%)',
-            top: '-0.26em'
-          },
-          '&.mq-empty:after': {
-            fontSize: '80%',
-            right: 'calc(-13%)',
-            top: '-0.26em'
-          },
-          '&.mq-empty': {
-            minHeight: '1.4em'
-          }
+    '& .mq-sup-only .mq-sup': {
+      marginBottom: '0.9px !important'
+    },
+    '& .mq-empty': {
+      backgroundColor: "".concat((0, _styles.alpha)(theme.palette.secondary.main, 0.4), " !important")
+    },
+    '& .mq-overline .mq-overline-inner': {
+      borderTop: '2px solid black'
+    },
+    '& .mq-non-leaf.mq-overline': {
+      borderTop: 'none !important'
+    },
+    '& .mq-overarrow': {
+      width: '30px',
+      marginTop: '0 !important',
+      borderTop: '2px solid black',
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+      '&.mq-arrow-both': {
+        top: '0px !important',
+        '& *': {
+          lineHeight: '1 !important',
+          borderTop: 'none !important'
         },
-        '&.mq-arrow-right:before': {
+        '&:before': {
           fontSize: '80%',
+          left: 'calc(-13%) !important',
+          top: '-0.31em !important'
+        },
+        '&:after': {
+          fontSize: '80% !important',
           right: 'calc(-13%) !important',
-          top: '-0.26em !important'
+          top: '-1.5em'
+        },
+        '&.mq-empty:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.26em'
         },
-        '& .mq-overarrow-inner': {
-          border: 'none !important'
+        '&.mq-empty:after': {
+          fontSize: '80%',
+          right: 'calc(-13%)',
+          top: '-0.26em'
         },
-        '& .mq-overarrow-inner .mq-overarrow-inner-right': {
-          display: 'none !important'
+        '&.mq-empty': {
+          minHeight: '1.4em'
         }
       },
-      '& .mq-root-block': {
-        padding: '5px !important'
-      },
-      '& .mq-overarrow.mq-arrow-both.mq-empty:after': {
-        right: '-6px',
-        fontSize: '80% !important',
-        top: '-3px'
-      },
-      '& .mq-overarrow.mq-arrow-right.mq-empty:before': {
-        right: '-5px',
-        fontSize: '80% !important',
-        top: '-3px'
+      '&.mq-arrow-right:before': {
+        fontSize: '80%',
+        right: 'calc(-13%) !important',
+        top: '-0.26em !important'
       },
-      '& .mq-overarrow.mq-arrow-both.mq-empty:before': {
-        left: '-6px',
-        fontSize: '80% !important',
-        top: '-3px'
+      '& .mq-overarrow-inner': {
+        border: 'none !important'
       },
-      '& .mq-longdiv-inner': {
-        borderTop: '1px solid !important',
-        paddingTop: '1.5px !important'
-      },
-      '& .mq-parallelogram': {
-        lineHeight: 0.85
-      },
-      '& .mq-overarc': {
-        borderTop: '2px solid black !important',
-        '& .mq-overline': {
-          borderTop: 'none !important' // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
-
-        },
-        '& .mq-overline-inner': {
-          borderTop: 'none !important',
-          paddingTop: '0 !important'
-        }
+      '& .mq-overarrow-inner .mq-overarrow-inner-right': {
+        display: 'none !important'
       }
     },
-    parallelButton: {
-      fontStyle: 'italic !important'
+    '& .mq-root-block': {
+      padding: '5px !important'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:after': {
+      right: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-right.mq-empty:before': {
+      right: '-5px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:before': {
+      left: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
     },
-    leftRightArrowButton: {
+    '& .mq-overarc': {
+      borderTop: '2px solid black !important',
+      '& .mq-overline': {
+        borderTop: 'none !important'
+      },
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important'
+      }
+    }
+  };
+
+  // Add specific styles based on latex content
+  if (latex === '\\parallel') {
+    return _objectSpread(_objectSpread({}, baseStyles), {}, {
+      fontStyle: 'italic !important'
+    });
+  }
+  if (latex === '\\overleftrightarrow{\\overline{}}') {
+    return _objectSpread(_objectSpread({}, baseStyles), {}, {
       '& .mq-overarrow.mq-arrow-both': {
         '& .mq-overline-inner': {
           borderTop: 'none !important',
@@ -198,22 +167,13 @@ var LatexButton = (0, _styles.withStyles)(function (theme) {
           top: '0px !important'
         }
       }
-    }
-  };
-})(function (props) {
-  var buttonClass;
-
-  if (props.latex === '\\parallel') {
-    buttonClass = (0, _classnames["default"])(props.classes.latexButton, props.mqClassName, props.classes.parallelButton);
-  } else if (props.latex === '\\overleftrightarrow{\\overline{}}') {
-    buttonClass = (0, _classnames["default"])(props.classes.latexButton, props.mqClassName, props.classes.leftRightArrowButton);
-  } else {
-    buttonClass = (0, _classnames["default"])(props.classes.latexButton, props.mqClassName);
+    });
   }
-
+  return baseStyles;
+});
+var LatexButton = function LatexButton(props) {
   try {
     var MQ = _mathquill["default"].getInterface(2);
-
     var span = document.createElement('span');
     span.innerHTML = '';
     var mathField = MQ.StaticMath(span);
@@ -223,17 +183,14 @@ var LatexButton = (0, _styles.withStyles)(function (theme) {
     // received latex has errors - do not create button
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
   }
-
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    className: (0, _classnames["default"])(props.classes.root, props.className),
+  return /*#__PURE__*/_react["default"].createElement(StyledLatexButton, {
+    className: props.className,
     onClick: props.onClick,
     "aria-label": props.ariaLabel
-  }, /*#__PURE__*/_react["default"].createElement(mq.Static, {
-    className: buttonClass,
+  }, /*#__PURE__*/_react["default"].createElement(LatexButtonContent, {
     latex: props.latex
   }));
-});
-
+};
 var createCustomLayout = function createCustomLayout(layoutObj) {
   if (layoutObj) {
     return {
@@ -242,72 +199,130 @@ var createCustomLayout = function createCustomLayout(layoutObj) {
       gridAutoFlow: 'initial'
     };
   }
-
   return {};
 };
-
-var KeyPad = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(KeyPad, _React$Component);
-
-  var _super = _createSuper(KeyPad);
-
+var KeyPadContainer = (0, _styles.styled)('div')(function (_ref3) {
+  var theme = _ref3.theme;
+  return _objectSpread(_objectSpread({}, _commonMqStyles.commonMqKeyboardStyles), {}, {
+    width: '100%',
+    display: 'grid',
+    gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+    gridRowGap: '0px',
+    gridColumnGap: '0px',
+    gridAutoFlow: 'column',
+    '&.character': {
+      textTransform: 'initial !important',
+      gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important'
+    },
+    '&.language': {
+      gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
+      '& *': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+      }
+    }
+  });
+});
+var StyledButton = (0, _styles.styled)(_Button["default"])(function (_ref4) {
+  var theme = _ref4.theme,
+    category = _ref4.category,
+    isDelete = _ref4.isDelete,
+    isComma = _ref4.isComma,
+    isDot = _ref4.isDot;
+  return _objectSpread({
+    minWidth: 'auto',
+    fontSize: isComma || isDot ? '200% !important' : '140% !important',
+    lineHeight: isComma || isDot ? '100%' : 'normal',
+    backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.5) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.5) : (0, _styles.lighten)(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.7) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.7) : (0, _styles.lighten)(theme.palette.primary.light, 0.7)
+    },
+    borderRadius: 0
+  }, isDelete && {
+    '& > span': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    }
+  });
+});
+var StyledLatexButtonWrapper = (0, _styles.styled)(_Button["default"])(function (_ref5) {
+  var theme = _ref5.theme,
+    category = _ref5.category;
+  return {
+    minWidth: 'auto',
+    borderRadius: 0,
+    backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.5) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.5) : (0, _styles.lighten)(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.7) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.7) : (0, _styles.lighten)(theme.palette.primary.light, 0.7)
+    }
+  };
+});
+var StyledIconButton = (0, _styles.styled)(_IconButton["default"])(function (_ref6) {
+  var theme = _ref6.theme,
+    category = _ref6.category;
+  return {
+    minWidth: 'auto',
+    backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.5) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.5) : (0, _styles.lighten)(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: category === 'operators' ? (0, _styles.lighten)(theme.palette.secondary.light, 0.7) : category === 'comparison' ? (0, _styles.lighten)(_colors.green[500], 0.7) : (0, _styles.lighten)(theme.palette.primary.light, 0.7)
+    },
+    borderRadius: 0,
+    '& .icon': {
+      height: '30px'
+    }
+  };
+});
+var KeyPad = exports.KeyPad = /*#__PURE__*/function (_React$Component) {
   function KeyPad(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, KeyPad);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeypadInteraction", function () {
+    _this = _callSuper(this, KeyPad, [props]);
+    (0, _defineProperty2["default"])(_this, "handleKeypadInteraction", function () {
       // Check if the setKeypadInteraction prop is available, which is used for both
       // the language keypad and the special characters keypad
       if (_this.props.setKeypadInteraction) {
         _this.props.setKeypadInteraction(true);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "buttonClick", function (key) {
+    (0, _defineProperty2["default"])(_this, "buttonClick", function (key) {
       log('[buttonClick]', key);
       var onPress = _this.props.onPress;
       onPress(key);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "flowKeys", function (base, extras) {
+    (0, _defineProperty2["default"])(_this, "flowKeys", function (base, extras) {
       var transposed = [].concat((0, _toConsumableArray2["default"])((0, _keysLayout.sortKeys)(base)), (0, _toConsumableArray2["default"])((0, _keysLayout.sortKeys)(extras)));
       return _lodash["default"].flatten(transposed);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "keyIsNotAllowed", function (key) {
+    (0, _defineProperty2["default"])(_this, "keyIsNotAllowed", function (key) {
       var noDecimal = _this.props.noDecimal;
-
       if ((key.write === '.' && key.label === '.' || key.write === ',' && key.label === ',') && noDecimal) {
         return true;
       }
-
       return false;
     });
     _this.keypadRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
-
-  (0, _createClass2["default"])(KeyPad, [{
+  (0, _inherits2["default"])(KeyPad, _React$Component);
+  return (0, _createClass2["default"])(KeyPad, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$keypadRef;
-
       var keyPadElement = (_this$keypadRef = this.keypadRef) === null || _this$keypadRef === void 0 ? void 0 : _this$keypadRef.current;
       var mainContainer = keyPadElement === null || keyPadElement === void 0 ? void 0 : keyPadElement.closest(".".concat(_constants["default"].MAIN_CONTAINER_CLASS));
-      var currentToolbar = keyPadElement === null || keyPadElement === void 0 ? void 0 : keyPadElement.closest('.pie-toolbar'); // need only for math keyboard so we need also controlledKeypadMode
+      var currentToolbar = keyPadElement === null || keyPadElement === void 0 ? void 0 : keyPadElement.closest('.pie-toolbar');
 
+      // need only for math keyboard so we need also controlledKeypadMode
       if (this.props.controlledKeypadMode && mainContainer && currentToolbar) {
         var mainContainerPosition = mainContainer.getBoundingClientRect();
         var currentToolbarPosition = currentToolbar.getBoundingClientRect();
         var difference = mainContainerPosition.top + mainContainerPosition.height - (currentToolbarPosition.top + currentToolbarPosition.height);
-
         if (difference < 0) {
-          var totalHeight = mainContainerPosition.height + mainContainerPosition.top - difference; // increase the height of the main container if keyboard needs it
-
+          var totalHeight = mainContainerPosition.height + mainContainerPosition.top - difference;
+          // increase the height of the main container if keyboard needs it
           if (mainContainer) {
             mainContainer.style.height = "".concat(totalHeight, "px");
           }
         }
       }
-
       if (keyPadElement) {
         keyPadElement.addEventListener('touchstart', this.handleKeypadInteraction, true);
         keyPadElement.addEventListener('mousedown', this.handleKeypadInteraction, true);
@@ -317,17 +332,14 @@ var KeyPad = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _this$keypadRef2;
-
-      var keyPadElement = (_this$keypadRef2 = this.keypadRef) === null || _this$keypadRef2 === void 0 ? void 0 : _this$keypadRef2.current; // need only for math keyboard
-
+      var keyPadElement = (_this$keypadRef2 = this.keypadRef) === null || _this$keypadRef2 === void 0 ? void 0 : _this$keypadRef2.current;
+      // need only for math keyboard
       if (this.props.controlledKeypadMode && keyPadElement) {
         var mainContainer = keyPadElement.closest(".".concat(_constants["default"].MAIN_CONTAINER_CLASS));
-
         if (mainContainer) {
           mainContainer.style.height = 'unset';
         }
       }
-
       if (keyPadElement) {
         keyPadElement.removeEventListener('touchstart', this.handleKeypadInteraction, true);
         keyPadElement.removeEventListener('mousedown', this.handleKeypadInteraction, true);
@@ -337,82 +349,69 @@ var KeyPad = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          baseSet = _this$props.baseSet,
-          additionalKeys = _this$props.additionalKeys,
-          layoutForKeyPad = _this$props.layoutForKeyPad,
-          onFocus = _this$props.onFocus,
-          mode = _this$props.mode;
+        className = _this$props.className,
+        baseSet = _this$props.baseSet,
+        additionalKeys = _this$props.additionalKeys,
+        layoutForKeyPad = _this$props.layoutForKeyPad,
+        onFocus = _this$props.onFocus,
+        mode = _this$props.mode;
       var noBaseSet = ['non-negative-integers', 'integers', 'decimals', 'fractions', 'item-authoring', 'language'];
       var keysWithoutBaseSet = noBaseSet.includes(mode);
-      var allKeys = keysWithoutBaseSet ? this.flowKeys([], additionalKeys || []) : this.flowKeys(baseSet, additionalKeys || []); //, ...sortKeys(additionalKeys)];
-
+      var allKeys = keysWithoutBaseSet ? this.flowKeys([], additionalKeys || []) : this.flowKeys(baseSet, additionalKeys || []);
       var shift = allKeys.length % 5 ? 1 : 0;
-
       var style = _objectSpread({
         gridTemplateColumns: "repeat(".concat(Math.floor(allKeys.length / 5) + shift, ", minmax(min-content, 150px))")
       }, createCustomLayout(layoutForKeyPad));
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(KeyPadContainer, {
         ref: this.keypadRef,
-        className: (0, _classnames["default"])(classes.keys, className, classes[mode]),
+        className: (0, _classnames["default"])(className, mode),
         style: style,
         onFocus: onFocus
       }, allKeys.map(function (k, index) {
         var onClick = _this2.buttonClick.bind(_this2, k);
-
         if (!k) {
           return /*#__PURE__*/_react["default"].createElement("span", {
             key: "empty-".concat(index)
           });
         }
-
         var common = _objectSpread(_objectSpread({
           onClick: onClick,
-          className: (0, _classnames["default"])(classes.labelButton, !keysWithoutBaseSet && classes[k.category], classes[k.extraClass], k.label === ',' && classes.comma, k.label === '.' && classes.dot),
           disabled: _this2.keyIsNotAllowed(k),
           key: "".concat(k.label || k.latex || k.command, "-").concat(index)
         }, k.actions || {}), k.extraProps || {});
-
         if (k.latex) {
-          return /*#__PURE__*/_react["default"].createElement(LatexButton, (0, _extends2["default"])({
-            latex: k.latex,
-            key: index
-          }, common, {
-            className: classes.latexButton,
-            ariaLabel: k.ariaLabel ? k.ariaLabel : k.name || k.label
+          return /*#__PURE__*/_react["default"].createElement(StyledLatexButtonWrapper, (0, _extends2["default"])({}, common, {
+            category: !keysWithoutBaseSet ? k.category : undefined,
+            "aria-label": k.ariaLabel ? k.ariaLabel : k.name || k.label
+          }), /*#__PURE__*/_react["default"].createElement(LatexButtonContent, {
+            latex: k.latex
           }));
         }
-
         if (k.label) {
-          return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-            key: index
-          }, common, {
-            className: (0, _classnames["default"])(common.className, (0, _defineProperty2["default"])({}, classes.deleteButton, k.label === '⌫')),
+          return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({}, common, {
+            category: !keysWithoutBaseSet ? k.category : undefined,
+            isDelete: k.label === '⌫',
+            isComma: k.label === ',',
+            isDot: k.label === '.',
             "aria-label": k.ariaLabel ? k.ariaLabel : k.name || k.label
           }), k.label);
         } else {
           var Icon = k.icon ? k.icon : 'div';
-          return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({
+          return /*#__PURE__*/_react["default"].createElement(StyledIconButton, (0, _extends2["default"])({
             tabIndex: '-1'
           }, common, {
-            key: index
+            category: !keysWithoutBaseSet ? k.category : undefined,
+            size: "large"
           }), /*#__PURE__*/_react["default"].createElement(Icon, {
-            className: classes.icon
+            className: "icon"
           }));
         }
       }));
     }
   }]);
-  return KeyPad;
 }(_react["default"].Component);
-
-exports.KeyPad = KeyPad;
 (0, _defineProperty2["default"])(KeyPad, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   controlledKeypadMode: _propTypes["default"].bool,
   baseSet: _propTypes["default"].array,
@@ -428,85 +427,5 @@ exports.KeyPad = KeyPad;
   baseSet: _keys.baseSet,
   noDecimal: false
 });
-
-var styles = function styles(theme) {
-  return {
-    keys: _objectSpread(_objectSpread({}, _commonMqStyles.commonMqKeyboardStyles), {}, {
-      width: '100%',
-      display: 'grid',
-      gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
-      gridRowGap: '0px',
-      gridColumnGap: '0px',
-      gridAutoFlow: 'column'
-    }),
-    character: {
-      textTransform: 'initial !important',
-      gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important'
-    },
-    language: {
-      gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
-      '& *': {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-      }
-    },
-    holder: {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      backgroundColor: '#cef',
-      borderRadius: 0,
-      padding: "".concat(theme.spacing.unit, "px 0 ").concat(theme.spacing.unit, "px 0")
-    },
-    labelButton: {
-      minWidth: 'auto',
-      fontSize: '140% !important',
-      backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.5),
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.7)
-      },
-      borderRadius: 0
-    },
-    latexButton: {
-      minWidth: 'auto',
-      borderRadius: 0,
-      backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.5),
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.7)
-      }
-    },
-    deleteButton: {
-      '& > span': {
-        fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
-      }
-    },
-    base: {},
-    operators: {
-      backgroundColor: (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.5),
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.7)
-      }
-    },
-    comparison: {
-      backgroundColor: (0, _colorManipulator.lighten)(_green["default"][500], 0.5),
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.lighten)(_green["default"][500], 0.7)
-      }
-    },
-    comma: {
-      fontSize: '200% !important',
-      lineHeight: '100%'
-    },
-    dot: {
-      fontSize: '200% !important',
-      lineHeight: '100%'
-    },
-    icon: {
-      height: '30px'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(KeyPad);
-
-exports["default"] = _default;
+var _default = exports["default"] = KeyPad;
 //# sourceMappingURL=index.js.map