@pie-lib/config-ui 11.2.2 → 11.3.0

package/lib/layout/settings-box.js

@@ -64,11 +64,11 @@ exports.SettingsBox = SettingsBox;
 });
 (0, _defineProperty2["default"])(SettingsBox, "defaultProps", {});
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     settingsBox: {
-      backgroundColor: '#FFF',
-      border: '2px solid #EEE',
+      backgroundColor: theme.palette.background.paper,
+      border: "2px solid ".concat(theme.palette.grey[200]),
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-start',

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

@@ -1 +1 @@
-{"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","backgroundColor","border","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;AAAA,SAAO;AACpBV,IAAAA,WAAW,EAAE;AACXW,MAAAA,eAAe,EAAE,MADN;AAEXC,MAAAA,MAAM,EAAE,gBAFG;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;AADO,GAAP;AAAA,CAAf;;eAce,wBAAWT,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 = () => ({\n  settingsBox: {\n    backgroundColor: '#FFF',\n    border: '2px solid #EEE',\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"}
+{"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/settings/panel.js

@@ -115,35 +115,39 @@ var Radio = function Radio(_ref2) {
 Radio.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].shape(labelValue))
 });
-var StyledRadio = (0, _styles.withStyles)({
-  radioSettings: {
-    marginTop: '4px',
-    paddingBottom: '4px',
-    width: '100%',
-    '& > label': {
-      color: 'rgba(0, 0, 0, 0.89)',
-      transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px'
+var StyledRadio = (0, _styles.withStyles)(function (theme) {
+  return {
+    radioSettings: {
+      marginTop: theme.spacing.unit / 2,
+      paddingBottom: theme.spacing.unit / 2,
+      width: '100%',
+      '& > label': {
+        color: 'rgba(0, 0, 0, 0.89)',
+        transform: 'translate(0, 10px) scale(1)',
+        fontSize: '14px'
+      },
+      '& > div': {
+        marginTop: theme.spacing.unit * 2.5
+      }
     },
-    '& > div': {
-      marginTop: '20px'
+    label: {
+      display: 'none'
     }
-  },
-  label: {
-    display: 'none'
-  }
+  };
 })(Radio);
-var Dropdown = (0, _styles.withStyles)({
-  label: {
-    margin: 0,
-    fontSize: '14px'
-  },
-  wrapper: {
-    marginTop: '4px',
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: '0 8px'
-  }
+var Dropdown = (0, _styles.withStyles)(function (theme) {
+  return {
+    label: {
+      margin: 0,
+      fontSize: theme.typography.fontSize
+    },
+    wrapper: {
+      marginTop: theme.spacing.unit / 2,
+      border: '2px solid lightgrey',
+      borderRadius: '4px',
+      padding: "0 ".concat(theme.spacing.unit, "px")
+    }
+  };
 })(function (_ref3) {
   var classes = _ref3.classes,
       label = _ref3.label,
@@ -174,18 +178,20 @@ var Dropdown = (0, _styles.withStyles)({
 Dropdown.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].string)
 });
-var NumberField = (0, _styles.withStyles)({
-  field: {
-    width: '35%',
-    marginRight: '24px',
-    marginTop: '8px'
-  },
-  wrapper: {
-    marginTop: '4px',
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: '0 8px'
-  }
+var NumberField = (0, _styles.withStyles)(function (theme) {
+  return {
+    field: {
+      width: '35%',
+      marginRight: theme.spacing.unit * 3,
+      marginTop: theme.spacing.unit
+    },
+    wrapper: {
+      marginTop: theme.spacing.unit / 2,
+      border: '2px solid lightgrey',
+      borderRadius: '4px',
+      padding: "0 ".concat(theme.spacing.unit, "px")
+    }
+  };
 })(function (_ref5) {
   var classes = _ref5.classes,
       label = _ref5.label,
@@ -240,19 +246,19 @@ var tagMap = {
   numberField: NumberField,
   checkbox: CheckboxChoice
 };
-var Group = (0, _styles.withStyles)(function () {
+var Group = (0, _styles.withStyles)(function (theme) {
   return {
     group: {
-      margin: '0 0 16px 0'
+      margin: "0 0 ".concat(theme.spacing.unit * 2, "px 0")
     },
     groupHeader: {
       color: '#495B8F',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize + 2,
       fontWeight: 600,
-      marginBottom: '8px'
+      marginBottom: theme.spacing.unit
     },
     numberFields: {
-      fontSize: '0.85rem',
+      fontSize: theme.typography.fontSize,
       marginBottom: 0
     }
   };

package/lib/settings/panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/panel.jsx"],"names":["log","labelValue","label","PropTypes","string","value","baseTypes","onChange","func","CheckboxChoice","event","target","checked","propTypes","bool","Radio","classes","choices","radioSettings","SettingsRadioLabel","arrayOf","shape","StyledRadio","marginTop","paddingBottom","width","color","transform","fontSize","display","Dropdown","margin","wrapper","border","borderRadius","padding","map","l","index","NumberField","field","marginRight","suffix","min","max","ev","object","number","ToggleWrapper","tagMap","toggle","radio","dropdown","numberField","checkbox","Group","group","groupHeader","fontWeight","marginBottom","numberFields","props","model","configuration","getTag","key","innerKey","isConfigProperty","properties","tagProps","Tag","type","v","content","currentGroup","fields","Object","keys","fieldKey","choiceKey","Panel","onChangeModel","onChangeConfiguration","groups","renderedGroups","showGroup","entries","some","propName","propVal","change","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport get from 'lodash/get';\nimport set from 'lodash/set';\nimport Select from '@material-ui/core/Select';\nimport Input from '@material-ui/core/Input';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport debug from 'debug';\n\nimport Toggle from './toggle';\nimport { NChoice } from '../two-choice';\nimport SettingsRadioLabel from './settings-radio-label';\nimport { NumberTextField } from '../index';\nimport Checkbox from '../checkbox';\n\nconst log = debug('pie-lib:config-ui:settings:panel');\n\nconst labelValue = {\n  label: PropTypes.string,\n  value: PropTypes.string,\n};\n\nconst baseTypes = {\n  label: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nconst CheckboxChoice = ({ label, value, onChange }) => {\n  return (\n    <Checkbox\n      checked={value}\n      label={label}\n      onChange={(event) => {\n        onChange(event.target.checked);\n      }}\n    />\n  );\n};\n\nCheckboxChoice.propTypes = {\n  label: PropTypes.string,\n  value: PropTypes.bool,\n  onChange: PropTypes.func,\n};\n\nconst Radio = ({ classes, label, value, onChange, choices }) => {\n  return (\n    <NChoice\n      className={classes.radioSettings}\n      direction=\"horizontal\"\n      customLabel={SettingsRadioLabel}\n      value={value}\n      header={label}\n      opts={choices}\n      onChange={onChange}\n    />\n  );\n};\n\nRadio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };\n\nconst StyledRadio = withStyles({\n  radioSettings: {\n    marginTop: '4px',\n    paddingBottom: '4px',\n    width: '100%',\n    '& > label': {\n      color: 'rgba(0, 0, 0, 0.89)',\n      transform: 'translate(0, 10px) scale(1)',\n      fontSize: '14px',\n    },\n    '& > div': {\n      marginTop: '20px',\n    },\n  },\n  label: {\n    display: 'none',\n  },\n})(Radio);\n\nconst Dropdown = withStyles({\n  label: {\n    margin: 0,\n    fontSize: '14px',\n  },\n  wrapper: {\n    marginTop: '4px',\n    border: '2px solid lightgrey',\n    borderRadius: '4px',\n    padding: '0 8px',\n  },\n})(({ classes, label, value, onChange, choices = [] }) => {\n  return (\n    <div>\n      {label && <p className={classes.label}>{label}</p>}\n      <Select\n        className={classes.wrapper}\n        value={value || (choices && choices[0])}\n        onChange={({ target }) => onChange(target.value)}\n        input={<Input id={`dropdown-${label}`} />}\n        disableUnderline\n      >\n        {choices.map((l, index) => (\n          <MenuItem key={index} value={l}>\n            {l}\n          </MenuItem>\n        ))}\n      </Select>\n    </div>\n  );\n});\n\nDropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };\n\nconst NumberField = withStyles({\n  field: {\n    width: '35%',\n    marginRight: '24px',\n    marginTop: '8px',\n  },\n  wrapper: {\n    marginTop: '4px',\n    border: '2px solid lightgrey',\n    borderRadius: '4px',\n    padding: '0 8px',\n  },\n})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {\n  return (\n    <NumberTextField\n      label={label || 'Label'}\n      value={value}\n      max={max}\n      min={min}\n      onChange={(ev, value) => onChange(value)}\n      suffix={suffix}\n      className={classes.field}\n      showErrorWhenOutsideRange\n      inputClassName={classes.wrapper}\n      disableUnderline\n    />\n  );\n});\n\nNumberField.propTypes = {\n  ...baseTypes,\n  classes: PropTypes.object,\n  suffix: PropTypes.string,\n  min: PropTypes.number,\n  max: PropTypes.number,\n  value: PropTypes.number,\n};\n\nconst ToggleWrapper = ({ label, value, onChange }) => <Toggle label={label} checked={!!value} toggle={onChange} />;\n\nToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };\n\nconst tagMap = {\n  toggle: ToggleWrapper,\n  radio: StyledRadio,\n  dropdown: Dropdown,\n  numberField: NumberField,\n  checkbox: CheckboxChoice,\n};\n\nconst Group = withStyles(() => ({\n  group: {\n    margin: '0 0 16px 0',\n  },\n  groupHeader: {\n    color: '#495B8F',\n    fontSize: '16px',\n    fontWeight: 600,\n    marginBottom: '8px',\n  },\n  numberFields: {\n    fontSize: '0.85rem',\n    marginBottom: 0,\n  },\n}))((props) => {\n  const { classes, model, label, group, configuration, onChange } = props;\n\n  /**\n   * @param group - the group of settings\n   * @param key - the key(or path) to be used to set or get from model or configuration\n   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)\n   * @returns tag that corresponds to element type */\n  const getTag = (group, key, innerKey) => {\n    const { isConfigProperty, ...properties } = get(group, innerKey || key);\n    const value = isConfigProperty ? get(configuration, key) : get(model, key);\n    const tagProps = { ...properties, key, value };\n    const Tag = tagMap[tagProps.type];\n\n    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;\n  };\n\n  const content = (group, key) => {\n    const currentGroup = group[key];\n\n    if (!currentGroup) {\n      return null;\n    }\n\n    const { type, label, fields, choices } = currentGroup;\n\n    if (type === 'numberFields') {\n      return (\n        <div key={`numberField-${label}`}>\n          <p className={classes.numberFields}>{label}</p>\n          {Object.keys(fields).map((fieldKey) => {\n            return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);\n          })}\n        </div>\n      );\n    }\n\n    if (type === 'checkboxes') {\n      return (\n        <div key={`checkbox-${label}`}>\n          <p>{label}</p>\n          {Object.keys(choices).map((choiceKey) => {\n            return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);\n          })}\n        </div>\n      );\n    }\n\n    // if type is toggle, radio, dropdown or numberField\n    return getTag(group, key);\n  };\n\n  return (\n    <div className={classes.group}>\n      <div className={classes.groupHeader}>{label}</div>\n\n      {Object.keys(group).map((key) => {\n        return content(group, key);\n      })}\n    </div>\n  );\n});\n\nexport class Panel extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    configuration: PropTypes.object,\n    groups: PropTypes.object,\n    onChangeModel: PropTypes.func,\n    onChangeConfiguration: PropTypes.func,\n  };\n\n  static defaultProps = {\n    onChangeModel: () => {},\n    onChangeConfiguration: () => {},\n  };\n\n  change = (key, value, isConfigProperty = false) => {\n    log('[changeModel]', key, value);\n\n    const { onChangeModel, onChangeConfiguration } = this.props;\n    const model = { ...this.props.model };\n    const configuration = { ...this.props.configuration };\n\n    if (isConfigProperty) {\n      set(configuration, key, value);\n      onChangeConfiguration(configuration, key);\n    } else {\n      set(model, key, value);\n      onChangeModel(model, key);\n    }\n  };\n\n  render() {\n    const { groups, model, configuration } = this.props;\n\n    log('render:', model);\n\n    const renderedGroups = Object.keys(groups || {}).map((group) => {\n      const showGroup = Object.entries(groups[group]).some(([propName, propVal]) => !!propVal);\n\n      if (showGroup) {\n        return (\n          <Group\n            label={group}\n            key={group}\n            model={model}\n            configuration={configuration}\n            group={groups[group]}\n            onChange={this.change}\n          />\n        );\n      }\n\n      return null;\n    });\n\n    return <div>{renderedGroups}</div>;\n  }\n}\n\nexport default Panel;\n"],"file":"panel.js"}
+{"version":3,"sources":["../../src/settings/panel.jsx"],"names":["log","labelValue","label","PropTypes","string","value","baseTypes","onChange","func","CheckboxChoice","event","target","checked","propTypes","bool","Radio","classes","choices","radioSettings","SettingsRadioLabel","arrayOf","shape","StyledRadio","theme","marginTop","spacing","unit","paddingBottom","width","color","transform","fontSize","display","Dropdown","margin","typography","wrapper","border","borderRadius","padding","map","l","index","NumberField","field","marginRight","suffix","min","max","ev","object","number","ToggleWrapper","tagMap","toggle","radio","dropdown","numberField","checkbox","Group","group","groupHeader","fontWeight","marginBottom","numberFields","props","model","configuration","getTag","key","innerKey","isConfigProperty","properties","tagProps","Tag","type","v","content","currentGroup","fields","Object","keys","fieldKey","choiceKey","Panel","onChangeModel","onChangeConfiguration","groups","renderedGroups","showGroup","entries","some","propName","propVal","change","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport get from 'lodash/get';\nimport set from 'lodash/set';\nimport Select from '@material-ui/core/Select';\nimport Input from '@material-ui/core/Input';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport debug from 'debug';\n\nimport Toggle from './toggle';\nimport { NChoice } from '../two-choice';\nimport SettingsRadioLabel from './settings-radio-label';\nimport { NumberTextField } from '../index';\nimport Checkbox from '../checkbox';\n\nconst log = debug('pie-lib:config-ui:settings:panel');\n\nconst labelValue = {\n  label: PropTypes.string,\n  value: PropTypes.string,\n};\n\nconst baseTypes = {\n  label: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nconst CheckboxChoice = ({ label, value, onChange }) => {\n  return (\n    <Checkbox\n      checked={value}\n      label={label}\n      onChange={(event) => {\n        onChange(event.target.checked);\n      }}\n    />\n  );\n};\n\nCheckboxChoice.propTypes = {\n  label: PropTypes.string,\n  value: PropTypes.bool,\n  onChange: PropTypes.func,\n};\n\nconst Radio = ({ classes, label, value, onChange, choices }) => {\n  return (\n    <NChoice\n      className={classes.radioSettings}\n      direction=\"horizontal\"\n      customLabel={SettingsRadioLabel}\n      value={value}\n      header={label}\n      opts={choices}\n      onChange={onChange}\n    />\n  );\n};\n\nRadio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };\n\nconst StyledRadio = withStyles((theme) => ({\n  radioSettings: {\n    marginTop: theme.spacing.unit / 2,\n    paddingBottom: theme.spacing.unit / 2,\n    width: '100%',\n    '& > label': {\n      color: 'rgba(0, 0, 0, 0.89)',\n      transform: 'translate(0, 10px) scale(1)',\n      fontSize: '14px',\n    },\n    '& > div': {\n      marginTop: theme.spacing.unit * 2.5,\n    },\n  },\n  label: {\n    display: 'none',\n  },\n}))(Radio);\n\nconst Dropdown = withStyles((theme) => ({\n  label: {\n    margin: 0,\n    fontSize: theme.typography.fontSize,\n  },\n  wrapper: {\n    marginTop: theme.spacing.unit / 2,\n    border: '2px solid lightgrey',\n    borderRadius: '4px',\n    padding: `0 ${theme.spacing.unit}px`,\n  },\n}))(({ classes, label, value, onChange, choices = [] }) => {\n  return (\n    <div>\n      {label && <p className={classes.label}>{label}</p>}\n      <Select\n        className={classes.wrapper}\n        value={value || (choices && choices[0])}\n        onChange={({ target }) => onChange(target.value)}\n        input={<Input id={`dropdown-${label}`} />}\n        disableUnderline\n      >\n        {choices.map((l, index) => (\n          <MenuItem key={index} value={l}>\n            {l}\n          </MenuItem>\n        ))}\n      </Select>\n    </div>\n  );\n});\n\nDropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };\n\nconst NumberField = withStyles((theme) => ({\n  field: {\n    width: '35%',\n    marginRight: theme.spacing.unit * 3,\n    marginTop: theme.spacing.unit,\n  },\n  wrapper: {\n    marginTop: theme.spacing.unit / 2,\n    border: '2px solid lightgrey',\n    borderRadius: '4px',\n    padding: `0 ${theme.spacing.unit}px`,\n  },\n}))(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {\n  return (\n    <NumberTextField\n      label={label || 'Label'}\n      value={value}\n      max={max}\n      min={min}\n      onChange={(ev, value) => onChange(value)}\n      suffix={suffix}\n      className={classes.field}\n      showErrorWhenOutsideRange\n      inputClassName={classes.wrapper}\n      disableUnderline\n    />\n  );\n});\n\nNumberField.propTypes = {\n  ...baseTypes,\n  classes: PropTypes.object,\n  suffix: PropTypes.string,\n  min: PropTypes.number,\n  max: PropTypes.number,\n  value: PropTypes.number,\n};\n\nconst ToggleWrapper = ({ label, value, onChange }) => <Toggle label={label} checked={!!value} toggle={onChange} />;\n\nToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };\n\nconst tagMap = {\n  toggle: ToggleWrapper,\n  radio: StyledRadio,\n  dropdown: Dropdown,\n  numberField: NumberField,\n  checkbox: CheckboxChoice,\n};\n\nconst Group = withStyles((theme) => ({\n  group: {\n    margin: `0 0 ${theme.spacing.unit * 2}px 0`,\n  },\n  groupHeader: {\n    color: '#495B8F',\n    fontSize: theme.typography.fontSize + 2,\n    fontWeight: 600,\n    marginBottom: theme.spacing.unit,\n  },\n  numberFields: {\n    fontSize: theme.typography.fontSize,\n    marginBottom: 0,\n  },\n}))((props) => {\n  const { classes, model, label, group, configuration, onChange } = props;\n\n  /**\n   * @param group - the group of settings\n   * @param key - the key(or path) to be used to set or get from model or configuration\n   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)\n   * @returns tag that corresponds to element type */\n  const getTag = (group, key, innerKey) => {\n    const { isConfigProperty, ...properties } = get(group, innerKey || key);\n    const value = isConfigProperty ? get(configuration, key) : get(model, key);\n    const tagProps = { ...properties, key, value };\n    const Tag = tagMap[tagProps.type];\n\n    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;\n  };\n\n  const content = (group, key) => {\n    const currentGroup = group[key];\n\n    if (!currentGroup) {\n      return null;\n    }\n\n    const { type, label, fields, choices } = currentGroup;\n\n    if (type === 'numberFields') {\n      return (\n        <div key={`numberField-${label}`}>\n          <p className={classes.numberFields}>{label}</p>\n          {Object.keys(fields).map((fieldKey) => {\n            return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);\n          })}\n        </div>\n      );\n    }\n\n    if (type === 'checkboxes') {\n      return (\n        <div key={`checkbox-${label}`}>\n          <p>{label}</p>\n          {Object.keys(choices).map((choiceKey) => {\n            return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);\n          })}\n        </div>\n      );\n    }\n\n    // if type is toggle, radio, dropdown or numberField\n    return getTag(group, key);\n  };\n\n  return (\n    <div className={classes.group}>\n      <div className={classes.groupHeader}>{label}</div>\n\n      {Object.keys(group).map((key) => {\n        return content(group, key);\n      })}\n    </div>\n  );\n});\n\nexport class Panel extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    configuration: PropTypes.object,\n    groups: PropTypes.object,\n    onChangeModel: PropTypes.func,\n    onChangeConfiguration: PropTypes.func,\n  };\n\n  static defaultProps = {\n    onChangeModel: () => {},\n    onChangeConfiguration: () => {},\n  };\n\n  change = (key, value, isConfigProperty = false) => {\n    log('[changeModel]', key, value);\n\n    const { onChangeModel, onChangeConfiguration } = this.props;\n    const model = { ...this.props.model };\n    const configuration = { ...this.props.configuration };\n\n    if (isConfigProperty) {\n      set(configuration, key, value);\n      onChangeConfiguration(configuration, key);\n    } else {\n      set(model, key, value);\n      onChangeModel(model, key);\n    }\n  };\n\n  render() {\n    const { groups, model, configuration } = this.props;\n\n    log('render:', model);\n\n    const renderedGroups = Object.keys(groups || {}).map((group) => {\n      const showGroup = Object.entries(groups[group]).some(([propName, propVal]) => !!propVal);\n\n      if (showGroup) {\n        return (\n          <Group\n            label={group}\n            key={group}\n            model={model}\n            configuration={configuration}\n            group={groups[group]}\n            onChange={this.change}\n          />\n        );\n      }\n\n      return null;\n    });\n\n    return <div>{renderedGroups}</div>;\n  }\n}\n\nexport default Panel;\n"],"file":"panel.js"}

package/lib/settings/settings-radio-label.js

@@ -15,13 +15,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _default = (0, _styles.withStyles)({
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '12px',
-    left: '-5px',
-    position: 'relative'
-  }
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    label: {
+      color: 'rgba(0, 0, 0, 0.89)',
+      fontSize: theme.typography.fontSize - 2,
+      left: '-5px',
+      position: 'relative'
+    }
+  };
 })(function (_ref) {
   var label = _ref.label,
       value = _ref.value,

package/lib/settings/settings-radio-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-radio-label.jsx"],"names":["label","color","fontSize","left","position","value","checked","onChange","classes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;eAEe,wBAAW;AACxBA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,qBADF;AAELC,IAAAA,QAAQ,EAAE,MAFL;AAGLC,IAAAA,IAAI,EAAE,MAHD;AAILC,IAAAA,QAAQ,EAAE;AAJL;AADiB,CAAX,EAOZ;AAAA,MAAGJ,KAAH,QAAGA,KAAH;AAAA,MAAUK,KAAV,QAAUA,KAAV;AAAA,MAAiBC,OAAjB,QAAiBA,OAAjB;AAAA,MAA0BC,QAA1B,QAA0BA,QAA1B;AAAA,MAAoCC,OAApC,QAAoCA,OAApC;AAAA,sBACD,gCAAC,4BAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,OAAO,EAAEG,OAFX;AAGE,IAAA,OAAO,eAAE,gCAAC,iBAAD;AAAO,MAAA,OAAO,EAAEF,OAAhB;AAAyB,MAAA,QAAQ,EAAEC;AAAnC,MAHX;AAIE,IAAA,KAAK,EAAEP;AAJT,IADC;AAAA,CAPY,C","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Radio from '@material-ui/core/Radio';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport default withStyles({\n  label: {\n    color: 'rgba(0, 0, 0, 0.89)',\n    fontSize: '12px',\n    left: '-5px',\n    position: 'relative',\n  },\n})(({ label, value, checked, onChange, classes }) => (\n  <FormControlLabel\n    value={value}\n    classes={classes}\n    control={<Radio checked={checked} onChange={onChange} />}\n    label={label}\n  />\n));\n"],"file":"settings-radio-label.js"}
+{"version":3,"sources":["../../src/settings/settings-radio-label.jsx"],"names":["theme","label","color","fontSize","typography","left","position","value","checked","onChange","classes"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;eAEe,wBAAW,UAACA,KAAD;AAAA,SAAY;AACpCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,qBADF;AAELC,MAAAA,QAAQ,EAAEH,KAAK,CAACI,UAAN,CAAiBD,QAAjB,GAA4B,CAFjC;AAGLE,MAAAA,IAAI,EAAE,MAHD;AAILC,MAAAA,QAAQ,EAAE;AAJL;AAD6B,GAAZ;AAAA,CAAX,EAOX;AAAA,MAAGL,KAAH,QAAGA,KAAH;AAAA,MAAUM,KAAV,QAAUA,KAAV;AAAA,MAAiBC,OAAjB,QAAiBA,OAAjB;AAAA,MAA0BC,QAA1B,QAA0BA,QAA1B;AAAA,MAAoCC,OAApC,QAAoCA,OAApC;AAAA,sBACF,gCAAC,4BAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,OAAO,EAAEG,OAFX;AAGE,IAAA,OAAO,eAAE,gCAAC,iBAAD;AAAO,MAAA,OAAO,EAAEF,OAAhB;AAAyB,MAAA,QAAQ,EAAEC;AAAnC,MAHX;AAIE,IAAA,KAAK,EAAER;AAJT,IADE;AAAA,CAPW,C","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Radio from '@material-ui/core/Radio';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport default withStyles((theme) => ({\n  label: {\n    color: 'rgba(0, 0, 0, 0.89)',\n    fontSize: theme.typography.fontSize - 2,\n    left: '-5px',\n    position: 'relative',\n  },\n}))(({ label, value, checked, onChange, classes }) => (\n  <FormControlLabel\n    value={value}\n    classes={classes}\n    control={<Radio checked={checked} onChange={onChange} />}\n    label={label}\n  />\n));\n"],"file":"settings-radio-label.js"}

package/lib/settings/toggle.js

@@ -26,7 +26,7 @@ var Toggle = (0, _styles.withStyles)(function (theme) {
     },
     label: {
       color: 'rgba(0, 0, 0, 0.89)',
-      fontSize: '14px',
+      fontSize: theme.typography.fontSize,
       paddingTop: theme.spacing.unit * 2
     }
   };

package/lib/settings/toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/toggle.jsx"],"names":["Toggle","theme","toggle","display","width","justifyContent","label","color","fontSize","paddingTop","spacing","unit","checked","classes","e","target","propTypes","PropTypes","bool","string","isRequired","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,wBAAW,UAACC,KAAD;AAAA,SAAY;AACpCC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,MADH;AAENC,MAAAA,KAAK,EAAE,MAFD;AAGNC,MAAAA,cAAc,EAAE;AAHV,KAD4B;AAMpCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,qBADF;AAELC,MAAAA,QAAQ,EAAE,MAFL;AAGLC,MAAAA,UAAU,EAAER,KAAK,CAACS,OAAN,CAAcC,IAAd,GAAqB;AAH5B;AAN6B,GAAZ;AAAA,CAAX,EAWX;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYN,KAAZ,QAAYA,KAAZ;AAAA,MAAmBJ,MAAnB,QAAmBA,MAAnB;AAAA,MAA2BW,OAA3B,QAA2BA,OAA3B;AAAA,sBACF;AAAK,IAAA,SAAS,EAAEA,OAAO,CAACX;AAAxB,kBACE,gCAAC,sBAAD;AAAY,IAAA,SAAS,EAAEW,OAAO,CAACP;AAA/B,KAAuCA,KAAvC,CADF,eAEE,gCAAC,kBAAD;AAAQ,IAAA,OAAO,EAAEM,OAAjB;AAA0B,IAAA,QAAQ,EAAE,kBAACE,CAAD;AAAA,aAAOZ,MAAM,CAACY,CAAC,CAACC,MAAF,CAASH,OAAV,CAAb;AAAA;AAApC,IAFF,CADE;AAAA,CAXW,CAAf;AAkBAZ,MAAM,CAACgB,SAAP,GAAmB;AACjBJ,EAAAA,OAAO,EAAEK,sBAAUC,IADF;AAEjBZ,EAAAA,KAAK,EAAEW,sBAAUE,MAAV,CAAiBC,UAFP;AAGjBlB,EAAAA,MAAM,EAAEe,sBAAUI,IAAV,CAAeD;AAHN,CAAnB;eAMepB,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { withStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\n\nconst Toggle = withStyles((theme) => ({\n  toggle: {\n    display: 'flex',\n    width: '100%',\n    justifyContent: 'space-between',\n  },\n  label: {\n    color: 'rgba(0, 0, 0, 0.89)',\n    fontSize: '14px',\n    paddingTop: theme.spacing.unit * 2,\n  },\n}))(({ checked, label, toggle, classes }) => (\n  <div className={classes.toggle}>\n    <InputLabel className={classes.label}>{label}</InputLabel>\n    <Switch checked={checked} onChange={(e) => toggle(e.target.checked)} />\n  </div>\n));\n\nToggle.propTypes = {\n  checked: PropTypes.bool,\n  label: PropTypes.string.isRequired,\n  toggle: PropTypes.func.isRequired,\n};\n\nexport default Toggle;\n"],"file":"toggle.js"}
+{"version":3,"sources":["../../src/settings/toggle.jsx"],"names":["Toggle","theme","toggle","display","width","justifyContent","label","color","fontSize","typography","paddingTop","spacing","unit","checked","classes","e","target","propTypes","PropTypes","bool","string","isRequired","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,wBAAW,UAACC,KAAD;AAAA,SAAY;AACpCC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,MADH;AAENC,MAAAA,KAAK,EAAE,MAFD;AAGNC,MAAAA,cAAc,EAAE;AAHV,KAD4B;AAMpCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,qBADF;AAELC,MAAAA,QAAQ,EAAEP,KAAK,CAACQ,UAAN,CAAiBD,QAFtB;AAGLE,MAAAA,UAAU,EAAET,KAAK,CAACU,OAAN,CAAcC,IAAd,GAAqB;AAH5B;AAN6B,GAAZ;AAAA,CAAX,EAWX;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYP,KAAZ,QAAYA,KAAZ;AAAA,MAAmBJ,MAAnB,QAAmBA,MAAnB;AAAA,MAA2BY,OAA3B,QAA2BA,OAA3B;AAAA,sBACF;AAAK,IAAA,SAAS,EAAEA,OAAO,CAACZ;AAAxB,kBACE,gCAAC,sBAAD;AAAY,IAAA,SAAS,EAAEY,OAAO,CAACR;AAA/B,KAAuCA,KAAvC,CADF,eAEE,gCAAC,kBAAD;AAAQ,IAAA,OAAO,EAAEO,OAAjB;AAA0B,IAAA,QAAQ,EAAE,kBAACE,CAAD;AAAA,aAAOb,MAAM,CAACa,CAAC,CAACC,MAAF,CAASH,OAAV,CAAb;AAAA;AAApC,IAFF,CADE;AAAA,CAXW,CAAf;AAkBAb,MAAM,CAACiB,SAAP,GAAmB;AACjBJ,EAAAA,OAAO,EAAEK,sBAAUC,IADF;AAEjBb,EAAAA,KAAK,EAAEY,sBAAUE,MAAV,CAAiBC,UAFP;AAGjBnB,EAAAA,MAAM,EAAEgB,sBAAUI,IAAV,CAAeD;AAHN,CAAnB;eAMerB,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport { withStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\n\nconst Toggle = withStyles((theme) => ({\n  toggle: {\n    display: 'flex',\n    width: '100%',\n    justifyContent: 'space-between',\n  },\n  label: {\n    color: 'rgba(0, 0, 0, 0.89)',\n    fontSize: theme.typography.fontSize,\n    paddingTop: theme.spacing.unit * 2,\n  },\n}))(({ checked, label, toggle, classes }) => (\n  <div className={classes.toggle}>\n    <InputLabel className={classes.label}>{label}</InputLabel>\n    <Switch checked={checked} onChange={(e) => toggle(e.target.checked)} />\n  </div>\n));\n\nToggle.propTypes = {\n  checked: PropTypes.bool,\n  label: PropTypes.string.isRequired,\n  toggle: PropTypes.func.isRequired,\n};\n\nexport default Toggle;\n"],"file":"toggle.js"}

package/lib/tags-input/index.js

@@ -170,7 +170,7 @@ exports.TagsInput = TagsInput;
 var styles = function styles(theme) {
   return {
     tagsInput: {
-      border: 'solid 0px white',
+      border: "0px solid ".concat(theme.palette.background.paper),
       display: 'flex',
       flexWrap: 'wrap'
     },
@@ -180,7 +180,7 @@ var styles = function styles(theme) {
       minWidth: '30px',
       width: '100%',
       flex: '1',
-      border: 'solid 0px white',
+      border: "0px solid ".concat(theme.palette.background.paper),
       height: '28px',
       fontSize: theme.typography.fontSize,
       fontFamily: theme.typography.fontFamily,

package/lib/tags-input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tags-input/index.jsx"],"names":["ENTER","Tag","tag","padding","margin","classes","label","onDelete","propTypes","PropTypes","string","isRequired","func","TagsInput","props","setState","focused","state","value","onKeyDown","event","keyCode","trim","newTags","tags","concat","length","onChange","target","deleteTag","tagIndex","indexOf","splice","input","focus","tagsInput","map","t","index","r","onFocus","onBlur","React","Component","object","arrayOf","styles","theme","border","display","flexWrap","minWidth","width","flex","height","fontSize","typography","fontFamily","outline"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG,EAAd;AAEA,IAAMC,GAAG,GAAG,wBAAW;AAAA,SAAO;AAC5BC,IAAAA,GAAG,EAAE;AACHC,MAAAA,OAAO,EAAE,KADN;AAEHC,MAAAA,MAAM,EAAE;AAFL;AADuB,GAAP;AAAA,CAAX,EAKR;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,KAAZ,QAAYA,KAAZ;AAAA,MAAmBC,QAAnB,QAAmBA,QAAnB;AAAA,sBAAkC,gCAAC,gBAAD;AAAM,IAAA,SAAS,EAAEF,OAAO,CAACH,GAAzB;AAA8B,IAAA,KAAK,EAAEI,KAArC;AAA4C,IAAA,QAAQ,EAAEC;AAAtD,IAAlC;AAAA,CALQ,CAAZ;AAOAN,GAAG,CAACO,SAAJ,GAAgB;AACdF,EAAAA,KAAK,EAAEG,sBAAUC,MAAV,CAAiBC,UADV;AAEdJ,EAAAA,QAAQ,EAAEE,sBAAUG,IAAV,CAAeD;AAFX,CAAhB;;IAKaE,S;;;;;AAOX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,gGAmCT,YAAM;AACd,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KArCkB;AAAA,+FAuCV,YAAM;AACb,YAAKD,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KAzCkB;AAEjB,UAAKC,KAAL,GAAa;AACXC,MAAAA,KAAK,EAAE,EADI;AAEXF,MAAAA,OAAO,EAAE;AAFE,KAAb;;AAKA,UAAKG,SAAL,GAAiB,UAACC,KAAD,EAAW;AAC1B,UAAIA,KAAK,CAACC,OAAN,KAAkBrB,KAAlB,IAA2B,MAAKiB,KAAL,CAAWC,KAAX,KAAqB,EAApD,EAAwD;AACtD,YAAMhB,GAAG,GAAG,MAAKe,KAAL,CAAWC,KAAX,CAAiBI,IAAjB,EAAZ;;AACA,YAAMC,OAAO,GAAG,sBAAK,MAAKT,KAAL,CAAWU,IAAX,CAAgBC,MAAhB,CAAuB,CAACvB,GAAD,CAAvB,CAAL,CAAhB;;AAEA,YAAIqB,OAAO,CAACG,MAAR,KAAmB,MAAKZ,KAAL,CAAWU,IAAX,CAAgBE,MAAvC,EAA+C;AAC7C,gBAAKZ,KAAL,CAAWa,QAAX,CAAoBJ,OAApB;;AACA,gBAAKR,QAAL,CAAc;AAAEG,YAAAA,KAAK,EAAE;AAAT,WAAd;AACD;AACF;AACF,KAVD;;AAYA,UAAKS,QAAL,GAAgB,UAACP,KAAD,EAAW;AACzB,YAAKL,QAAL,CAAc;AAAEG,QAAAA,KAAK,EAAEE,KAAK,CAACQ,MAAN,CAAaV;AAAtB,OAAd;AACD,KAFD;;AAIA,UAAKW,SAAL,GAAiB,UAAC3B,GAAD,EAAS;AACxB,UAAQsB,IAAR,GAAiB,MAAKV,KAAtB,CAAQU,IAAR;AAEA,UAAMM,QAAQ,GAAGN,IAAI,CAACO,OAAL,CAAa7B,GAAb,CAAjB;;AACA,UAAI4B,QAAQ,KAAK,CAAC,CAAlB,EAAqB;AACnBN,QAAAA,IAAI,CAACQ,MAAL,CAAYF,QAAZ,EAAsB,CAAtB;;AACA,cAAKhB,KAAL,CAAWa,QAAX,CAAoBH,IAApB;;AACA,cAAKS,KAAL,CAAWC,KAAX;AACD;AACF,KATD;;AAvBiB;AAiClB;;;;WAUD,kBAAS;AAAA;;AACP,wBAA0B,KAAKpB,KAA/B;AAAA,UAAQT,OAAR,eAAQA,OAAR;AAAA,UAAiBmB,IAAjB,eAAiBA,IAAjB;AACA,0BACE,gCAAC,kBAAD;AAAQ,QAAA,OAAO,EAAE,KAAKP,KAAL,CAAWD;AAA5B,sBACE;AAAK,QAAA,SAAS,EAAEX,OAAO,CAAC8B;AAAxB,SACG,CAACX,IAAI,IAAI,EAAT,EAAaY,GAAb,CAAiB,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BAChB,gCAAC,GAAD;AAAK,UAAA,GAAG,EAAEA,KAAV;AAAiB,UAAA,KAAK,EAAED,CAAxB;AAA2B,UAAA,QAAQ,EAAE;AAAA,mBAAM,MAAI,CAACR,SAAL,CAAeQ,CAAf,CAAN;AAAA;AAArC,UADgB;AAAA,OAAjB,CADH,eAIE;AACE,QAAA,GAAG,EAAE,aAACE,CAAD;AAAA,iBAAQ,MAAI,CAACN,KAAL,GAAaM,CAArB;AAAA,SADP;AAEE,QAAA,SAAS,EAAE,KAAKpB,SAFlB;AAGE,QAAA,QAAQ,EAAE,KAAKQ,QAHjB;AAIE,QAAA,SAAS,EAAEtB,OAAO,CAAC4B,KAJrB;AAKE,QAAA,KAAK,EAAE,KAAKhB,KAAL,CAAWC,KALpB;AAME,QAAA,OAAO,EAAE,KAAKsB,OANhB;AAOE,QAAA,MAAM,EAAE,KAAKC,MAPf;AAQE,QAAA,IAAI,EAAC;AARP,QAJF,CADF,CADF;AAmBD;;;EAvE4BC,kBAAMC,S;;;iCAAxB9B,S,eACQ;AACjBR,EAAAA,OAAO,EAAEI,sBAAUmC,MAAV,CAAiBjC,UADT;AAEjBa,EAAAA,IAAI,EAAEf,sBAAUoC,OAAV,CAAkBpC,sBAAUC,MAA5B,EAAoCC,UAFzB;AAGjBgB,EAAAA,QAAQ,EAAElB,sBAAUG,IAAV,CAAeD;AAHR,C;;AAyErB,IAAMmC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBZ,IAAAA,SAAS,EAAE;AACTa,MAAAA,MAAM,EAAE,iBADC;AAETC,MAAAA,OAAO,EAAE,MAFA;AAGTC,MAAAA,QAAQ,EAAE;AAHD,KADc;AAMzBjB,IAAAA,KAAK,EAAE;AACL9B,MAAAA,OAAO,EAAE,KADJ;AAELC,MAAAA,MAAM,EAAE,KAFH;AAGL+C,MAAAA,QAAQ,EAAE,MAHL;AAILC,MAAAA,KAAK,EAAE,MAJF;AAKLC,MAAAA,IAAI,EAAE,GALD;AAMLL,MAAAA,MAAM,EAAE,iBANH;AAOLM,MAAAA,MAAM,EAAE,MAPH;AAQLC,MAAAA,QAAQ,EAAER,KAAK,CAACS,UAAN,CAAiBD,QARtB;AASLE,MAAAA,UAAU,EAAEV,KAAK,CAACS,UAAN,CAAiBC,UATxB;AAULC,MAAAA,OAAO,EAAE,MAVJ;AAWL,iBAAW;AACTA,QAAAA,OAAO,EAAE;AADA;AAXN;AANkB,GAAZ;AAAA,CAAf;;eAuBe,wBAAWZ,MAAX,EAAmBjC,SAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport uniq from 'lodash/uniq';\nimport Chip from '@material-ui/core/Chip';\nimport MuiBox from '../mui-box';\n\nconst ENTER = 13;\n\nconst Tag = withStyles(() => ({\n  tag: {\n    padding: '0px',\n    margin: '1px',\n  },\n}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);\n\nTag.propTypes = {\n  label: PropTypes.string.isRequired,\n  onDelete: PropTypes.func.isRequired,\n};\n\nexport class TagsInput extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    tags: PropTypes.arrayOf(PropTypes.string).isRequired,\n    onChange: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: '',\n      focused: false,\n    };\n\n    this.onKeyDown = (event) => {\n      if (event.keyCode === ENTER && this.state.value !== '') {\n        const tag = this.state.value.trim();\n        const newTags = uniq(this.props.tags.concat([tag]));\n\n        if (newTags.length !== this.props.tags.length) {\n          this.props.onChange(newTags);\n          this.setState({ value: '' });\n        }\n      }\n    };\n\n    this.onChange = (event) => {\n      this.setState({ value: event.target.value });\n    };\n\n    this.deleteTag = (tag) => {\n      const { tags } = this.props;\n\n      const tagIndex = tags.indexOf(tag);\n      if (tagIndex !== -1) {\n        tags.splice(tagIndex, 1);\n        this.props.onChange(tags);\n        this.input.focus();\n      }\n    };\n  }\n\n  onFocus = () => {\n    this.setState({ focused: true });\n  };\n\n  onBlur = () => {\n    this.setState({ focused: false });\n  };\n\n  render() {\n    const { classes, tags } = this.props;\n    return (\n      <MuiBox focused={this.state.focused}>\n        <div className={classes.tagsInput}>\n          {(tags || []).map((t, index) => (\n            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />\n          ))}\n          <input\n            ref={(r) => (this.input = r)}\n            onKeyDown={this.onKeyDown}\n            onChange={this.onChange}\n            className={classes.input}\n            value={this.state.value}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            type=\"text\"\n          />\n        </div>\n      </MuiBox>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  tagsInput: {\n    border: 'solid 0px white',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  input: {\n    padding: '2px',\n    margin: '1px',\n    minWidth: '30px',\n    width: '100%',\n    flex: '1',\n    border: 'solid 0px white',\n    height: '28px',\n    fontSize: theme.typography.fontSize,\n    fontFamily: theme.typography.fontFamily,\n    outline: 'none',\n    '&:focus': {\n      outline: 'none',\n    },\n  },\n});\n\nexport default withStyles(styles)(TagsInput);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/tags-input/index.jsx"],"names":["ENTER","Tag","tag","padding","margin","classes","label","onDelete","propTypes","PropTypes","string","isRequired","func","TagsInput","props","setState","focused","state","value","onKeyDown","event","keyCode","trim","newTags","tags","concat","length","onChange","target","deleteTag","tagIndex","indexOf","splice","input","focus","tagsInput","map","t","index","r","onFocus","onBlur","React","Component","object","arrayOf","styles","theme","border","palette","background","paper","display","flexWrap","minWidth","width","flex","height","fontSize","typography","fontFamily","outline"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport uniq from 'lodash/uniq';\nimport Chip from '@material-ui/core/Chip';\nimport MuiBox from '../mui-box';\n\nconst ENTER = 13;\n\nconst Tag = withStyles(() => ({\n  tag: {\n    padding: '0px',\n    margin: '1px',\n  },\n}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);\n\nTag.propTypes = {\n  label: PropTypes.string.isRequired,\n  onDelete: PropTypes.func.isRequired,\n};\n\nexport class TagsInput extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    tags: PropTypes.arrayOf(PropTypes.string).isRequired,\n    onChange: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: '',\n      focused: false,\n    };\n\n    this.onKeyDown = (event) => {\n      if (event.keyCode === ENTER && this.state.value !== '') {\n        const tag = this.state.value.trim();\n        const newTags = uniq(this.props.tags.concat([tag]));\n\n        if (newTags.length !== this.props.tags.length) {\n          this.props.onChange(newTags);\n          this.setState({ value: '' });\n        }\n      }\n    };\n\n    this.onChange = (event) => {\n      this.setState({ value: event.target.value });\n    };\n\n    this.deleteTag = (tag) => {\n      const { tags } = this.props;\n\n      const tagIndex = tags.indexOf(tag);\n      if (tagIndex !== -1) {\n        tags.splice(tagIndex, 1);\n        this.props.onChange(tags);\n        this.input.focus();\n      }\n    };\n  }\n\n  onFocus = () => {\n    this.setState({ focused: true });\n  };\n\n  onBlur = () => {\n    this.setState({ focused: false });\n  };\n\n  render() {\n    const { classes, tags } = this.props;\n    return (\n      <MuiBox focused={this.state.focused}>\n        <div className={classes.tagsInput}>\n          {(tags || []).map((t, index) => (\n            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />\n          ))}\n          <input\n            ref={(r) => (this.input = r)}\n            onKeyDown={this.onKeyDown}\n            onChange={this.onChange}\n            className={classes.input}\n            value={this.state.value}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            type=\"text\"\n          />\n        </div>\n      </MuiBox>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  tagsInput: {\n    border: `0px solid ${theme.palette.background.paper}`,\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  input: {\n    padding: '2px',\n    margin: '1px',\n    minWidth: '30px',\n    width: '100%',\n    flex: '1',\n    border: `0px solid ${theme.palette.background.paper}`,\n    height: '28px',\n    fontSize: theme.typography.fontSize,\n    fontFamily: theme.typography.fontFamily,\n    outline: 'none',\n    '&:focus': {\n      outline: 'none',\n    },\n  },\n});\n\nexport default withStyles(styles)(TagsInput);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "11.2.2",
+  "version": "11.3.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -10,7 +10,7 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/editable-html": "^9.4.1",
+    "@pie-lib/editable-html": "^9.5.0",
     "@pie-lib/icons": "^2.4.26",
     "@pie-lib/render-ui": "^4.13.7",
     "classnames": "^2.2.6",
@@ -26,5 +26,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "7d35be038ac82f281b0de61e730a84fdc966fb20"
+  "gitHead": "629368c10c78d61b6551df2b0f0a04ec56fdef99"
 }

package/src/checkbox.jsx

@@ -40,7 +40,7 @@ Checkbox.defaultProps = {
 
 export default withStyles((theme) => ({
   label: {
-    fontSize: '13px',
+    fontSize: theme.typography.fontSize - 1,
     transform: 'translate(-4%, 2%)',
     color: 'rgba(0,0,0,1.0)',
   },
@@ -53,7 +53,7 @@ export default withStyles((theme) => ({
   miniLabel: {
     marginLeft: theme.spacing.unit,
     color: grey[700],
-    fontSize: '11px',
+    fontSize: theme.typography.fontSize - 3,
   },
   mini: {
     margin: 0,

package/src/choice-configuration/feedback-menu.jsx

@@ -30,7 +30,6 @@ export class IconMenu extends React.Component {
 
   render() {
     const { opts, onClick } = this.props;
-
     const keys = Object.keys(opts);
 
     const handleMenuClick = (key) => () => {
@@ -66,10 +65,8 @@ export default class FeedbackMenu extends React.Component {
 
   render() {
     const { value, onChange, classes } = this.props;
-
     const t = value && value.type;
     const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
-
     const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
 
     const icon = (

package/src/choice-configuration/index.jsx

@@ -61,7 +61,7 @@ const EditableHtmlContainer = withStyles((theme) => ({
   },
 );
 
-const Feedback = withStyles(() => ({
+const Feedback = withStyles((theme) => ({
   text: {
     width: '100%',
   },
@@ -69,7 +69,7 @@ const Feedback = withStyles(() => ({
     position: 'relative',
   },
   arrowIcon: {
-    fill: '#ccc',
+    fill: theme.palette.grey[400],
     left: -56,
     position: 'absolute',
     top: 20,
@@ -284,7 +284,7 @@ export class ChoiceConfiguration extends React.Component {
 
 const styles = (theme) => ({
   index: {
-    padding: '24px 10px 0 0',
+    padding: '24px 8px 0 0',
   },
   choiceConfiguration: {},
   topRow: {
@@ -328,8 +328,8 @@ const styles = (theme) => ({
     flexDirection: 'column',
   },
   errorText: {
-    fontSize: '12px',
-    color: 'red',
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
   },
 });
 

package/src/feedback-config/feedback-selector.jsx

@@ -13,7 +13,7 @@ const feedbackLabels = {
 
 const holder = (theme, extras) => ({
   marginTop: '0px',
-  background: '#e0dee0',
+  background: theme.palette.grey[300],
   padding: theme.spacing.unit,
   marginBottom: theme.spacing.unit * 2,
   borderRadius: '4px',
@@ -34,7 +34,7 @@ const style = (theme) => ({
     paddingBottom: 0,
   },
   customHolder: holder(theme, {
-    background: '#e0dee0',
+    background: theme.palette.grey[400],
     padding: 0,
   }),
   defaultHolder: holder(theme, {

package/src/feedback-config/group.jsx

@@ -4,9 +4,9 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 
-const styles = () => ({
+const styles = (theme) => ({
   radioLabel: {
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
   },
   choice: {
     display: 'flex',

package/src/help.jsx

@@ -27,13 +27,13 @@ RawHelpButton.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export const HelpButton = withStyles({
+export const HelpButton = withStyles((theme) => ({
   icon: {
     '&:hover': {
-      color: '#ddd',
+      color: theme.palette.grey[300],
     },
   },
-})(RawHelpButton);
+}))(RawHelpButton);
 
 export const HelpDialog = ({ open, onClose, children, title }) => (
   <Dialog open={open} onRequestClose={onClose}>

package/src/inputs.jsx

@@ -70,21 +70,21 @@ const RawInputRadio = (props) => {
 
 RawInputRadio.propTypes = { ...InputTypes };
 
-const InputCheckbox = withStyles({
+const InputCheckbox = withStyles((theme) => ({
   checkboxRoot: {
     transform: 'translate(-25%, 20%)',
   },
   error: {
-    color: 'red',
+    color: theme.palette.error.main,
   },
-})(RawInputCheckbox);
+}))(RawInputCheckbox);
 
-const InputRadio = withStyles(() => ({
+const InputRadio = withStyles((theme) => ({
   radioRoot: {
     transform: 'translate(-20%, 20%)',
   },
   error: {
-    color: 'red',
+    color: theme.palette.error.main,
   },
 }))(RawInputRadio);
 

package/src/langs.jsx

@@ -45,6 +45,7 @@ export class RawLangs extends React.Component {
 
   choose = (event) => {
     log('[choose] event: ', event);
+
     if (this.props.onChange) {
       this.props.onChange(event.target.value);
     }
@@ -52,13 +53,16 @@ export class RawLangs extends React.Component {
 
   render() {
     let { langs, selected, label, classes } = this.props;
+
     log('[render] selected:', selected);
+
     return (
       <div className={classes.root}>
         <FormControl className={classes.formControl}>
           <InputLabel className={classes.inputLabel} htmlFor={this.uid}>
             {label}
           </InputLabel>
+
           <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
             {langs.map((l, index) => (
               <MenuItem key={index} value={l}>

package/src/layout/config-layout.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import Measure from 'react-measure';
+import { withContentRect } from 'react-measure';
 import PropTypes from 'prop-types';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
 
-class ConfigLayout extends React.Component {
+class MeasuredConfigLayout extends React.Component {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
@@ -55,4 +56,6 @@ class ConfigLayout extends React.Component {
   }
 }
 
+const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+
 export default ConfigLayout;

package/src/layout/settings-box.jsx

@@ -18,10 +18,10 @@ export class SettingsBox extends React.Component {
     return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
   }
 }
-const styles = () => ({
+const styles = (theme) => ({
   settingsBox: {
-    backgroundColor: '#FFF',
-    border: '2px solid #EEE',
+    backgroundColor: theme.palette.background.paper,
+    border: `2px solid ${theme.palette.grey[200]}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'flex-start',