@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/lib/layout/layout-contents.js

@@ -1,77 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 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 _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
+
+var _core = require("@material-ui/core");
+
 var _tabs = _interopRequireDefault(require("../tabs"));
-var _classnames = _interopRequireDefault(require("classnames"));
-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 StyledContainer = (0, _styles.styled)('div')(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative'
-  };
-});
-var StyledFlow = (0, _styles.styled)('div')(function () {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between'
-  };
-});
-var StyledContentContainer = (0, _styles.styled)('div')(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    padding: "".concat(theme.spacing(2), "px 0")
-  };
-});
-var StyledConfigContainer = (0, _styles.styled)('div')(function () {
-  return {
-    flex: '1'
-  };
-});
-var StyledSettingsContainer = (0, _styles.styled)('div')(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginLeft: theme.spacing(2)
-  };
-});
+
+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 RawLayoutContents = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLayoutContents, _React$Component);
+
+  var _super = _createSuper(RawLayoutContents);
+
   function RawLayoutContents() {
     var _this;
+
     (0, _classCallCheck2["default"])(this, RawLayoutContents);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, RawLayoutContents, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "getConfiguration", function () {
-      var _secondary$props, _secondary$props2;
-      var secondary = _this.props.secondary;
-      // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
 
-      return (secondary === null || secondary === void 0 || (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : _secondary$props.configuration) || (secondary === null || secondary === void 0 || (_secondary$props2 = secondary.props) === null || _secondary$props2 === void 0 || (_secondary$props2 = _secondary$props2.children) === null || _secondary$props2 === void 0 || (_secondary$props2 = _secondary$props2.props) === null || _secondary$props2 === void 0 ? void 0 : _secondary$props2.configuration) || undefined;
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getConfiguration", function () {
+      var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
+
+      var secondary = _this.props.secondary; // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
+
+      return (secondary === null || secondary === void 0 ? void 0 : (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : _secondary$props.configuration) || (secondary === null || secondary === void 0 ? void 0 : (_secondary$props2 = secondary.props) === null || _secondary$props2 === void 0 ? void 0 : (_secondary$props2$chi = _secondary$props2.children) === null || _secondary$props2$chi === void 0 ? void 0 : (_secondary$props2$chi2 = _secondary$props2$chi.props) === null || _secondary$props2$chi2 === void 0 ? void 0 : _secondary$props2$chi2.configuration) || undefined;
     });
     return _this;
   }
-  (0, _inherits2["default"])(RawLayoutContents, _React$Component);
-  return (0, _createClass2["default"])(RawLayoutContents, [{
+
+  (0, _createClass2["default"])(RawLayoutContents, [{
     key: "render",
-    value:
-    // // eslint-disable-next-line no-unused-vars
+    value: // // eslint-disable-next-line no-unused-vars
     // componentDidUpdate(prevProps, prevState, snapshot) {
     //   const configuration = this.getConfiguration();
     //   const { mode } = this.props;
@@ -95,50 +88,57 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
     //     console.log(e.toString());
     //   }
     // }
-
     function render() {
       var _this$props = this.props,
-        mode = _this$props.mode,
-        secondary = _this$props.secondary,
-        children = _this$props.children,
-        dimensions = _this$props.dimensions;
-      var _ref4 = dimensions || {},
-        minHeight = _ref4.minHeight,
-        minWidth = _ref4.minWidth,
-        maxHeight = _ref4.maxHeight,
-        maxWidth = _ref4.maxWidth;
+          mode = _this$props.mode,
+          secondary = _this$props.secondary,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          dimensions = _this$props.dimensions;
+
+      var _ref = dimensions || {},
+          minHeight = _ref.minHeight,
+          minWidth = _ref.minWidth,
+          maxHeight = _ref.maxHeight,
+          maxWidth = _ref.maxWidth;
+
       var configuration = this.getConfiguration();
-      var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref5) {
-        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-          obj = _ref6[1];
+      var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+            obj = _ref3[1];
+
         return !!(obj !== null && obj !== void 0 && obj.settings);
-      });
-      // ebsr has configuration.partA and configuration.partB
+      }); // ebsr has configuration.partA and configuration.partB
       // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
 
       if (!hasSettingsPanel) {
         try {
-          var _JSON$stringify;
-          hasSettingsPanel = (_JSON$stringify = JSON.stringify(configuration)) === null || _JSON$stringify === void 0 || (_JSON$stringify = _JSON$stringify.match(/settings":true/)) === null || _JSON$stringify === void 0 ? void 0 : _JSON$stringify.length;
+          var _JSON$stringify, _JSON$stringify$match;
+
+          hasSettingsPanel = (_JSON$stringify = JSON.stringify(configuration)) === null || _JSON$stringify === void 0 ? void 0 : (_JSON$stringify$match = _JSON$stringify.match(/settings":true/)) === null || _JSON$stringify$match === void 0 ? void 0 : _JSON$stringify$match.length;
         } catch (e) {
           // eslint-disable-next-line no-console
           console.log(e.toString());
         }
       }
-      return /*#__PURE__*/_react["default"].createElement(StyledContainer, {
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.container,
         style: {
           minHeight: minHeight,
           minWidth: minWidth,
           maxHeight: maxHeight,
           maxWidth: maxWidth
         }
-      }, mode === 'inline' && /*#__PURE__*/_react["default"].createElement(StyledFlow, null, /*#__PURE__*/_react["default"].createElement(StyledConfigContainer, {
-        className: "design-container"
-      }, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(StyledSettingsContainer, {
-        className: "settings-container"
+      }, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.flow, classes.contentContainer)
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.configContainer, 'design-container')
+      }, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.settingsContainer, 'settings-container')
       }, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
         onChange: this.onTabsChange,
-        contentClassName: "content-container",
+        contentClassName: classes.contentContainer,
         indicatorColor: "primary"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         title: "Design",
@@ -146,17 +146,46 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
       }, children), /*#__PURE__*/_react["default"].createElement("div", {
         title: "Settings",
         className: "settings-container"
-      }, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(StyledContentContainer, {
-        className: "design-container"
+      }, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.contentContainer, 'design-container')
       }, children));
     }
   }]);
+  return RawLayoutContents;
 }(_react["default"].Component);
+
 (0, _defineProperty2["default"])(RawLayoutContents, "propTypes", {
   mode: _propTypes["default"].oneOf(['tabbed', 'inline']),
   secondary: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  classes: _propTypes["default"].object,
   dimensions: _propTypes["default"].object
 });
-var _default = exports["default"] = RawLayoutContents;
+
+var styles = function styles(theme) {
+  return {
+    flow: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative'
+    },
+    contentContainer: {
+      padding: "".concat(theme.spacing.unit * 2, "px 0")
+    },
+    configContainer: {
+      flex: '1'
+    },
+    settingsContainer: {
+      marginLeft: theme.spacing.unit * 2
+    }
+  };
+};
+
+var _default = (0, _core.withStyles)(styles)(RawLayoutContents);
+
+exports["default"] = _default;
 //# sourceMappingURL=layout-contents.js.map

package/lib/layout/layout-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-contents.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_tabs","_classnames","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","StyledContainer","styled","_ref","theme","display","flexDirection","position","StyledFlow","justifyContent","StyledContentContainer","_ref2","padding","concat","spacing","StyledConfigContainer","flex","StyledSettingsContainer","_ref3","marginLeft","RawLayoutContents","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_defineProperty2","_secondary$props","_secondary$props2","secondary","props","configuration","children","undefined","_inherits2","_createClass2","key","value","render","_this$props","mode","dimensions","_ref4","minHeight","minWidth","maxHeight","maxWidth","getConfiguration","hasSettingsPanel","Object","entries","some","_ref5","_ref6","_slicedToArray2","obj","settings","_JSON$stringify","JSON","stringify","match","console","log","toString","createElement","style","className","onChange","onTabsChange","contentClassName","indicatorColor","title","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","_default","exports"],"sources":["../../src/layout/layout-contents.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport Tabs from '../tabs';\nimport classNames from 'classnames';\n\nconst StyledContainer = styled('div')(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n}));\n\nconst StyledFlow = styled('div')(() => ({\n  display: 'flex',\n  justifyContent: 'space-between',\n}));\n\nconst StyledContentContainer = styled('div')(({ theme }) => ({\n  padding: `${theme.spacing(2)}px 0`,\n}));\n\nconst StyledConfigContainer = styled('div')(() => ({\n  flex: '1',\n}));\n\nconst StyledSettingsContainer = styled('div')(({ theme }) => ({\n  marginLeft: theme.spacing(2),\n}));\n\nclass RawLayoutContents extends React.Component {\n  static propTypes = {\n    mode: PropTypes.oneOf(['tabbed', 'inline']),\n    secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    dimensions: PropTypes.object,\n  };\n\n  getConfiguration = () => {\n    const { secondary } = this.props;\n    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null\n\n    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;\n  };\n\n  // // eslint-disable-next-line no-unused-vars\n  // componentDidUpdate(prevProps, prevState, snapshot) {\n  //   const configuration = this.getConfiguration();\n  //   const { mode } = this.props;\n  //\n  //   // promptHolder class is used to wrap up inputs:\n  //   // we don't want inputs to fill the entire scrollable container,\n  //   // but instead we want inputs to fit in the first view,\n  //   // so we calculate the maximum space inputs need\n  //   try {\n  //     if (\n  //       configuration?.maxWidth &&\n  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==\n  //         configuration?.maxWidth\n  //     ) {\n  //       document.documentElement.style.setProperty(\n  //         '--pie-prompt-holder-max-width',\n  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,\n  //       );\n  //     }\n  //   } catch (e) {\n  //     console.log(e.toString());\n  //   }\n  // }\n\n  render() {\n    const { mode, secondary, children, dimensions } = this.props;\n    const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};\n    const configuration = this.getConfiguration();\n\n    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!obj?.settings);\n    // ebsr has configuration.partA and configuration.partB\n    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings\n\n    if (!hasSettingsPanel) {\n      try {\n        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings\":true/)?.length;\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.log(e.toString());\n      }\n    }\n\n    return (\n      <StyledContainer style={{ minHeight, minWidth, maxHeight, maxWidth }}>\n        {mode === 'inline' && (\n          <StyledFlow>\n            <StyledConfigContainer className=\"design-container\">{children}</StyledConfigContainer>\n            {hasSettingsPanel && (\n              <StyledSettingsContainer className=\"settings-container\">{secondary}</StyledSettingsContainer>\n            )}\n          </StyledFlow>\n        )}\n\n        {mode === 'tabbed' && hasSettingsPanel && (\n          <Tabs onChange={this.onTabsChange} contentClassName=\"content-container\" indicatorColor=\"primary\">\n            <div title=\"Design\" className=\"design-container\">\n              {children}\n            </div>\n            <div title=\"Settings\" className=\"settings-container\">\n              {secondary}\n            </div>\n          </Tabs>\n        )}\n\n        {mode === 'tabbed' && !hasSettingsPanel && (\n          <StyledContentContainer className=\"design-container\">{children}</StyledContentContainer>\n        )}\n      </StyledContainer>\n    );\n  }\n}\n\nexport default RawLayoutContents;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","mode","classes","dimensions","minHeight","minWidth","maxHeight","maxWidth","getConfiguration","hasSettingsPanel","Object","entries","some","obj","settings","JSON","stringify","match","length","e","console","log","toString","container","flow","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","padding","spacing","unit","flex","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Tabs from '../tabs';\nimport classNames from 'classnames';\n\nclass RawLayoutContents extends React.Component {\n  static propTypes = {\n    mode: PropTypes.oneOf(['tabbed', 'inline']),\n    secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    classes: PropTypes.object,\n    dimensions: PropTypes.object,\n  };\n\n  getConfiguration = () => {\n    const { secondary } = this.props;\n    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null\n\n    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;\n  };\n\n  // // eslint-disable-next-line no-unused-vars\n  // componentDidUpdate(prevProps, prevState, snapshot) {\n  //   const configuration = this.getConfiguration();\n  //   const { mode } = this.props;\n  //\n  //   // promptHolder class is used to wrap up inputs:\n  //   // we don't want inputs to fill the entire scrollable container,\n  //   // but instead we want inputs to fit in the first view,\n  //   // so we calculate the maximum space inputs need\n  //   try {\n  //     if (\n  //       configuration?.maxWidth &&\n  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==\n  //         configuration?.maxWidth\n  //     ) {\n  //       document.documentElement.style.setProperty(\n  //         '--pie-prompt-holder-max-width',\n  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,\n  //       );\n  //     }\n  //   } catch (e) {\n  //     console.log(e.toString());\n  //   }\n  // }\n\n  render() {\n    const { mode, secondary, children, classes, dimensions } = this.props;\n    const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};\n    const configuration = this.getConfiguration();\n\n    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!obj?.settings);\n    // ebsr has configuration.partA and configuration.partB\n    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings\n\n    if (!hasSettingsPanel) {\n      try {\n        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings\":true/)?.length;\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.log(e.toString());\n      }\n    }\n\n    return (\n      <div className={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>\n        {mode === 'inline' && (\n          <div className={classnames(classes.flow, classes.contentContainer)}>\n            <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>\n            {hasSettingsPanel && (\n              <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>\n            )}\n          </div>\n        )}\n\n        {mode === 'tabbed' && hasSettingsPanel && (\n          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor=\"primary\">\n            <div title=\"Design\" className=\"design-container\">\n              {children}\n            </div>\n            <div title=\"Settings\" className=\"settings-container\">\n              {secondary}\n            </div>\n          </Tabs>\n        )}\n\n        {mode === 'tabbed' && !hasSettingsPanel && (\n          <div className={classNames(classes.contentContainer, 'design-container')}>{children}</div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  flow: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n  },\n  contentContainer: {\n    padding: `${theme.spacing.unit * 2}px 0`,\n  },\n  configContainer: {\n    flex: '1',\n  },\n  settingsContainer: {\n    marginLeft: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(RawLayoutContents);\n"],"file":"layout-contents.js"}

package/lib/layout/settings-box.js

@@ -1,57 +1,86 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.SettingsBox = void 0;
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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("@mui/material/styles");
-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 StyledSettingsBox = (0, _styles.styled)('div')(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    backgroundColor: theme.palette.background.paper,
-    border: "2px solid ".concat(theme.palette.grey[200]),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    minWidth: '275px',
-    maxWidth: '300px',
-    padding: '20px 4px 4px 20px',
-    zIndex: 99
-  };
-});
-var SettingsBox = exports.SettingsBox = /*#__PURE__*/function (_React$Component) {
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 SettingsBox = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(SettingsBox, _React$Component);
+
+  var _super = _createSuper(SettingsBox);
+
   function SettingsBox() {
     (0, _classCallCheck2["default"])(this, SettingsBox);
-    return _callSuper(this, SettingsBox, arguments);
+    return _super.apply(this, arguments);
   }
-  (0, _inherits2["default"])(SettingsBox, _React$Component);
-  return (0, _createClass2["default"])(SettingsBox, [{
+
+  (0, _createClass2["default"])(SettingsBox, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        className = _this$props.className,
-        children = _this$props.children;
-      return /*#__PURE__*/_react["default"].createElement(StyledSettingsBox, {
-        className: className
+          classes = _this$props.classes,
+          className = _this$props.className,
+          children = _this$props.children;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.settingsBox, className)
       }, children);
     }
   }]);
+  return SettingsBox;
 }(_react["default"].Component);
+
+exports.SettingsBox = SettingsBox;
 (0, _defineProperty2["default"])(SettingsBox, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
 });
 (0, _defineProperty2["default"])(SettingsBox, "defaultProps", {});
-var _default = exports["default"] = SettingsBox;
+
+var styles = function styles(theme) {
+  return {
+    settingsBox: {
+      backgroundColor: theme.palette.background.paper,
+      border: "2px solid ".concat(theme.palette.grey[200]),
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      minWidth: '275px',
+      maxWidth: '300px',
+      padding: '20px 4px 4px 20px',
+      zIndex: 99
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(SettingsBox);
+
+exports["default"] = _default;
 //# sourceMappingURL=settings-box.js.map

package/lib/layout/settings-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-box.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","StyledSettingsBox","styled","_ref","theme","backgroundColor","palette","background","paper","border","concat","grey","display","flexDirection","justifyContent","minWidth","maxWidth","padding","zIndex","SettingsBox","exports","_React$Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_this$props","props","className","children","createElement","React","Component","_defineProperty2","PropTypes","string","oneOfType","arrayOf","node","isRequired","_default"],"sources":["../../src/layout/settings-box.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nconst StyledSettingsBox = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.background.paper,\n  border: `2px solid ${theme.palette.grey[200]}`,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-start',\n  minWidth: '275px',\n  maxWidth: '300px',\n  padding: '20px 4px 4px 20px',\n  zIndex: 99,\n}));\n\nexport class SettingsBox extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { className, children } = this.props;\n\n    return <StyledSettingsBox className={className}>{children}</StyledSettingsBox>;\n  }\n}\n\nexport default SettingsBox;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA8C,SAAAG,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAE9C,IAAMc,iBAAiB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQ;IACtDC,eAAe,EAAED,KAAK,CAACE,OAAO,CAACC,UAAU,CAACC,KAAK;IAC/CC,MAAM,eAAAC,MAAA,CAAeN,KAAK,CAACE,OAAO,CAACK,IAAI,CAAC,GAAG,CAAC,CAAE;IAC9CC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,cAAc,EAAE,YAAY;IAC5BC,QAAQ,EAAE,OAAO;IACjBC,QAAQ,EAAE,OAAO;IACjBC,OAAO,EAAE,mBAAmB;IAC5BC,MAAM,EAAE;EACV,CAAC;AAAA,CAAC,CAAC;AAAC,IAESC,WAAW,GAAAC,OAAA,CAAAD,WAAA,0BAAAE,gBAAA;EAAA,SAAAF,YAAA;IAAA,IAAAG,gBAAA,mBAAAH,WAAA;IAAA,OAAAjC,UAAA,OAAAiC,WAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,WAAA,EAAAE,gBAAA;EAAA,WAAAI,aAAA,aAAAN,WAAA;IAAAO,GAAA;IAAAC,KAAA,EAQtB,SAAAC,MAAMA,CAAA,EAAG;MACP,IAAAC,WAAA,GAAgC,IAAI,CAACC,KAAK;QAAlCC,SAAS,GAAAF,WAAA,CAATE,SAAS;QAAEC,QAAQ,GAAAH,WAAA,CAARG,QAAQ;MAE3B,oBAAOnD,MAAA,YAAAoD,aAAA,CAAChC,iBAAiB;QAAC8B,SAAS,EAAEA;MAAU,GAAEC,QAA4B,CAAC;IAChF;EAAC;AAAA,EAZ8BE,iBAAK,CAACC,SAAS;AAAA,IAAAC,gBAAA,aAAnCjB,WAAW,eACH;EACjBY,SAAS,EAAEM,qBAAS,CAACC,MAAM;EAC3BN,QAAQ,EAAEK,qBAAS,CAACE,SAAS,CAAC,CAACF,qBAAS,CAACG,OAAO,CAACH,qBAAS,CAACI,IAAI,CAAC,EAAEJ,qBAAS,CAACI,IAAI,CAAC,CAAC,CAACC;AACrF,CAAC;AAAA,IAAAN,gBAAA,aAJUjB,WAAW,kBAMA,CAAC,CAAC;AAAA,IAAAwB,QAAA,GAAAvB,OAAA,cASXD,WAAW","ignoreList":[]}
+{"version":3,"sources":["../../src/layout/settings-box.jsx"],"names":["SettingsBox","props","classes","className","children","settingsBox","React","Component","PropTypes","object","isRequired","string","oneOfType","arrayOf","node","styles","theme","backgroundColor","palette","background","paper","border","grey","display","flexDirection","justifyContent","minWidth","maxWidth","padding","zIndex"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;IAEaA,W;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAyC,KAAKC,KAA9C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,UAA4BC,QAA5B,eAA4BA,QAA5B;AAEA,0BAAO;AAAK,QAAA,SAAS,EAAE,4BAAWF,OAAO,CAACG,WAAnB,EAAgCF,SAAhC;AAAhB,SAA6DC,QAA7D,CAAP;AACD;;;EAb8BE,kBAAMC,S;;;iCAA1BP,W,eACQ;AACjBE,EAAAA,OAAO,EAAEM,sBAAUC,MAAV,CAAiBC,UADT;AAEjBP,EAAAA,SAAS,EAAEK,sBAAUG,MAFJ;AAGjBP,EAAAA,QAAQ,EAAEI,sBAAUI,SAAV,CAAoB,CAACJ,sBAAUK,OAAV,CAAkBL,sBAAUM,IAA5B,CAAD,EAAoCN,sBAAUM,IAA9C,CAApB,EAAyEJ;AAHlE,C;iCADRV,W,kBAOW,E;;AAQxB,IAAMe,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBX,IAAAA,WAAW,EAAE;AACXY,MAAAA,eAAe,EAAED,KAAK,CAACE,OAAN,CAAcC,UAAd,CAAyBC,KAD/B;AAEXC,MAAAA,MAAM,sBAAeL,KAAK,CAACE,OAAN,CAAcI,IAAd,CAAmB,GAAnB,CAAf,CAFK;AAGXC,MAAAA,OAAO,EAAE,MAHE;AAIXC,MAAAA,aAAa,EAAE,QAJJ;AAKXC,MAAAA,cAAc,EAAE,YALL;AAMXC,MAAAA,QAAQ,EAAE,OANC;AAOXC,MAAAA,QAAQ,EAAE,OAPC;AAQXC,MAAAA,OAAO,EAAE,mBARE;AASXC,MAAAA,MAAM,EAAE;AATG;AADY,GAAZ;AAAA,CAAf;;eAce,wBAAWd,MAAX,EAAmBf,WAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class SettingsBox extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, children } = this.props;\n\n    return <div className={classNames(classes.settingsBox, className)}>{children}</div>;\n  }\n}\nconst styles = (theme) => ({\n  settingsBox: {\n    backgroundColor: theme.palette.background.paper,\n    border: `2px solid ${theme.palette.grey[200]}`,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-start',\n    minWidth: '275px',\n    maxWidth: '300px',\n    padding: '20px 4px 4px 20px',\n    zIndex: 99,\n  },\n});\n\nexport default withStyles(styles)(SettingsBox);\n"],"file":"settings-box.js"}

package/lib/mui-box/index.js

@@ -1,63 +1,79 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
+
+var _styles = require("@material-ui/core/styles");
+
 var _debug = _interopRequireDefault(require("debug"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var log = (0, _debug["default"])('pie-elements:config-ui:mui-box');
-var StyledMuiBox = (0, _styles.styled)('div')(function (_ref) {
-  var theme = _ref.theme,
-    focused = _ref.focused;
-  var light = theme.palette.mode === 'light';
+var MuiBox = (0, _styles.withStyles)(function (theme) {
+  var light = theme.palette.type === 'light';
   var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
-  log(theme.palette.primary[theme.palette.mode || 'light']);
+  log(theme.palette.primary[theme.palette.type || 'light']);
   return {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    position: 'relative',
-    '&:before': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: bottomLineColor
-    },
-    '&:hover:before': {
-      height: '2px'
+    muiBox: {
+      paddingTop: theme.spacing.unit,
+      paddingBottom: theme.spacing.unit,
+      position: 'relative',
+      '&:before': {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '1px',
+        content: '""',
+        position: 'absolute',
+        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        pointerEvents: 'none',
+        backgroundColor: bottomLineColor
+      },
+      '&:hover:before': {
+        height: '2px'
+      },
+      '&:after': {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '2px',
+        content: '""',
+        position: 'absolute',
+        transform: 'scaleX(0)',
+        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+        pointerEvents: 'none',
+        backgroundColor: theme.palette.primary[theme.palette.type] //'#304ffe'
+
+      }
     },
-    '&:after': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '2px',
-      content: '""',
-      position: 'absolute',
-      transform: focused ? 'scaleX(1)' : 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: theme.palette.primary[theme.palette.mode] //'#304ffe'
+    focused: {
+      '&:after': {
+        transform: 'scaleX(1)'
+      }
     }
   };
-});
-var MuiBox = function MuiBox(_ref2) {
-  var children = _ref2.children,
-    focused = _ref2.focused;
-  return /*#__PURE__*/_react["default"].createElement(StyledMuiBox, {
-    focused: focused
+})(function (_ref) {
+  var children = _ref.children,
+      classes = _ref.classes,
+      focused = _ref.focused;
+  var names = (0, _classnames["default"])(classes.muiBox, focused && classes.focused);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: names
   }, children);
-};
+});
 MuiBox.propTypes = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
   focused: _propTypes["default"].bool.isRequired
 };
-var _default = exports["default"] = MuiBox;
+var _default = MuiBox;
+exports["default"] = _default;
 //# sourceMappingURL=index.js.map

package/lib/mui-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_debug","log","debug","StyledMuiBox","styled","_ref","theme","focused","light","palette","mode","bottomLineColor","primary","paddingTop","spacing","paddingBottom","position","left","right","bottom","height","content","transition","pointerEvents","backgroundColor","transform","MuiBox","_ref2","children","createElement","propTypes","PropTypes","oneOfType","arrayOf","node","isRequired","bool","_default","exports"],"sources":["../../src/mui-box/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport debug from 'debug';\n\nconst log = debug('pie-elements:config-ui:mui-box');\n\nconst StyledMuiBox = styled('div')(({ theme, focused }) => {\n  const light = theme.palette.mode === 'light';\n  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';\n\n  log(theme.palette.primary[theme.palette.mode || 'light']);\n\n  return {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    position: 'relative',\n    '&:before': {\n      left: 0,\n      right: 0,\n      bottom: 0,\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: bottomLineColor,\n    },\n    '&:hover:before': {\n      height: '2px',\n    },\n    '&:after': {\n      left: 0,\n      right: 0,\n      bottom: 0,\n      height: '2px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: focused ? 'scaleX(1)' : 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: theme.palette.primary[theme.palette.mode], //'#304ffe'\n    },\n  };\n});\n\nconst MuiBox = ({ children, focused }) => {\n  return <StyledMuiBox focused={focused}>{children}</StyledMuiBox>;\n};\n\nMuiBox.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  focused: PropTypes.bool.isRequired,\n};\n\nexport default MuiBox;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAMI,GAAG,GAAG,IAAAC,iBAAK,EAAC,gCAAgC,CAAC;AAEnD,IAAMC,YAAY,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAC,IAAA,EAAwB;EAAA,IAArBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;EAClD,IAAMC,KAAK,GAAGF,KAAK,CAACG,OAAO,CAACC,IAAI,KAAK,OAAO;EAC5C,IAAMC,eAAe,GAAGH,KAAK,GAAG,qBAAqB,GAAG,0BAA0B;EAElFP,GAAG,CAACK,KAAK,CAACG,OAAO,CAACG,OAAO,CAACN,KAAK,CAACG,OAAO,CAACC,IAAI,IAAI,OAAO,CAAC,CAAC;EAEzD,OAAO;IACLG,UAAU,EAAEP,KAAK,CAACQ,OAAO,CAAC,CAAC,CAAC;IAC5BC,aAAa,EAAET,KAAK,CAACQ,OAAO,CAAC,CAAC,CAAC;IAC/BE,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE;MACVC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE,IAAI;MACbL,QAAQ,EAAE,UAAU;MACpBM,UAAU,EAAE,yDAAyD;MACrEC,aAAa,EAAE,MAAM;MACrBC,eAAe,EAAEb;IACnB,CAAC;IACD,gBAAgB,EAAE;MAChBS,MAAM,EAAE;IACV,CAAC;IACD,SAAS,EAAE;MACTH,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE,IAAI;MACbL,QAAQ,EAAE,UAAU;MACpBS,SAAS,EAAElB,OAAO,GAAG,WAAW,GAAG,WAAW;MAC9Ce,UAAU,EAAE,kDAAkD;MAC9DC,aAAa,EAAE,MAAM;MACrBC,eAAe,EAAElB,KAAK,CAACG,OAAO,CAACG,OAAO,CAACN,KAAK,CAACG,OAAO,CAACC,IAAI,CAAC,CAAE;IAC9D;EACF,CAAC;AACH,CAAC,CAAC;AAEF,IAAMgB,MAAM,GAAG,SAATA,MAAMA,CAAAC,KAAA,EAA8B;EAAA,IAAxBC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAErB,OAAO,GAAAoB,KAAA,CAAPpB,OAAO;EACjC,oBAAOZ,MAAA,YAAAkC,aAAA,CAAC1B,YAAY;IAACI,OAAO,EAAEA;EAAQ,GAAEqB,QAAuB,CAAC;AAClE,CAAC;AAEDF,MAAM,CAACI,SAAS,GAAG;EACjBF,QAAQ,EAAEG,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,OAAO,CAACF,qBAAS,CAACG,IAAI,CAAC,EAAEH,qBAAS,CAACG,IAAI,CAAC,CAAC,CAACC,UAAU;EAC7F5B,OAAO,EAAEwB,qBAAS,CAACK,IAAI,CAACD;AAC1B,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,cAEaZ,MAAM","ignoreList":[]}
+{"version":3,"sources":["../../src/mui-box/index.jsx"],"names":["log","MuiBox","theme","light","palette","type","bottomLineColor","primary","muiBox","paddingTop","spacing","unit","paddingBottom","position","left","right","bottom","height","content","transition","pointerEvents","backgroundColor","transform","focused","children","classes","names","propTypes","PropTypes","oneOfType","arrayOf","node","isRequired","bool"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,GAAG,GAAG,uBAAM,gCAAN,CAAZ;AAEA,IAAMC,MAAM,GAAG,wBAAW,UAACC,KAAD,EAAW;AACnC,MAAMC,KAAK,GAAGD,KAAK,CAACE,OAAN,CAAcC,IAAd,KAAuB,OAArC;AACA,MAAMC,eAAe,GAAGH,KAAK,GAAG,qBAAH,GAA2B,0BAAxD;AAEAH,EAAAA,GAAG,CAACE,KAAK,CAACE,OAAN,CAAcG,OAAd,CAAsBL,KAAK,CAACE,OAAN,CAAcC,IAAd,IAAsB,OAA5C,CAAD,CAAH;AAEA,SAAO;AACLG,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IADpB;AAENC,MAAAA,aAAa,EAAEV,KAAK,CAACQ,OAAN,CAAcC,IAFvB;AAGNE,MAAAA,QAAQ,EAAE,UAHJ;AAIN,kBAAY;AACVC,QAAAA,IAAI,EAAE,CADI;AAEVC,QAAAA,KAAK,EAAE,CAFG;AAGVC,QAAAA,MAAM,EAAE,CAHE;AAIVC,QAAAA,MAAM,EAAE,KAJE;AAKVC,QAAAA,OAAO,EAAE,IALC;AAMVL,QAAAA,QAAQ,EAAE,UANA;AAOVM,QAAAA,UAAU,EAAE,yDAPF;AAQVC,QAAAA,aAAa,EAAE,MARL;AASVC,QAAAA,eAAe,EAAEf;AATP,OAJN;AAeN,wBAAkB;AAChBW,QAAAA,MAAM,EAAE;AADQ,OAfZ;AAkBN,iBAAW;AACTH,QAAAA,IAAI,EAAE,CADG;AAETC,QAAAA,KAAK,EAAE,CAFE;AAGTC,QAAAA,MAAM,EAAE,CAHC;AAITC,QAAAA,MAAM,EAAE,KAJC;AAKTC,QAAAA,OAAO,EAAE,IALA;AAMTL,QAAAA,QAAQ,EAAE,UAND;AAOTS,QAAAA,SAAS,EAAE,WAPF;AAQTH,QAAAA,UAAU,EAAE,kDARH;AASTC,QAAAA,aAAa,EAAE,MATN;AAUTC,QAAAA,eAAe,EAAEnB,KAAK,CAACE,OAAN,CAAcG,OAAd,CAAsBL,KAAK,CAACE,OAAN,CAAcC,IAApC,CAVR,CAUmD;;AAVnD;AAlBL,KADH;AAgCLkB,IAAAA,OAAO,EAAE;AACP,iBAAW;AACTD,QAAAA,SAAS,EAAE;AADF;AADJ;AAhCJ,GAAP;AAsCD,CA5Cc,EA4CZ,gBAAoC;AAAA,MAAjCE,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,OAAuB,QAAvBA,OAAuB;AAAA,MAAdF,OAAc,QAAdA,OAAc;AACrC,MAAMG,KAAK,GAAG,4BAAWD,OAAO,CAACjB,MAAnB,EAA2Be,OAAO,IAAIE,OAAO,CAACF,OAA9C,CAAd;AAEA,sBAAO;AAAK,IAAA,SAAS,EAAEG;AAAhB,KAAwBF,QAAxB,CAAP;AACD,CAhDc,CAAf;AAkDAvB,MAAM,CAAC0B,SAAP,GAAmB;AACjBH,EAAAA,QAAQ,EAAEI,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,OAAV,CAAkBF,sBAAUG,IAA5B,CAAD,EAAoCH,sBAAUG,IAA9C,CAApB,EAAyEC,UADlE;AAEjBT,EAAAA,OAAO,EAAEK,sBAAUK,IAAV,CAAeD;AAFP,CAAnB;eAKe/B,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nconst log = debug('pie-elements:config-ui:mui-box');\n\nconst MuiBox = withStyles((theme) => {\n  const light = theme.palette.type === 'light';\n  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';\n\n  log(theme.palette.primary[theme.palette.type || 'light']);\n\n  return {\n    muiBox: {\n      paddingTop: theme.spacing.unit,\n      paddingBottom: theme.spacing.unit,\n      position: 'relative',\n      '&:before': {\n        left: 0,\n        right: 0,\n        bottom: 0,\n        height: '1px',\n        content: '\"\"',\n        position: 'absolute',\n        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n        pointerEvents: 'none',\n        backgroundColor: bottomLineColor,\n      },\n      '&:hover:before': {\n        height: '2px',\n      },\n      '&:after': {\n        left: 0,\n        right: 0,\n        bottom: 0,\n        height: '2px',\n        content: '\"\"',\n        position: 'absolute',\n        transform: 'scaleX(0)',\n        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',\n        pointerEvents: 'none',\n        backgroundColor: theme.palette.primary[theme.palette.type], //'#304ffe'\n      },\n    },\n    focused: {\n      '&:after': {\n        transform: 'scaleX(1)',\n      },\n    },\n  };\n})(({ children, classes, focused }) => {\n  const names = classNames(classes.muiBox, focused && classes.focused);\n\n  return <div className={names}>{children}</div>;\n});\n\nMuiBox.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  focused: PropTypes.bool.isRequired,\n};\n\nexport default MuiBox;\n"],"file":"index.js"}