@digigov/form 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Change Log - @digigov/form
 
-This log was last generated on Thu, 20 Jan 2022 10:45:21 GMT and should not be manually modified.
+This log was last generated on Wed, 02 Feb 2022 15:44:29 GMT and should not be manually modified.
+
+## 0.4.7
+Wed, 02 Feb 2022 15:44:29 GMT
+
+### Patches
+
+- Integrate @digigov/react-core components to @digigov/form
+- fix package.json inconsistencies by running cli-lab verify-and-update-local-package-versions
 
 ## 0.4.6
 Thu, 20 Jan 2022 10:45:21 GMT

package/Field/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFieldContainerStyles = exports["default"] = exports.FieldBase = exports.Field = void 0;
+exports["default"] = exports.FieldBase = exports.Field = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -21,9 +21,17 @@ var _reactHookForm = require("react-hook-form");
 
 var _form = require("@digigov/form");
 
-var _styles = require("@material-ui/core/styles");
+var _Field = _interopRequireDefault(require("@digigov/react-core/Field"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Label = _interopRequireDefault(require("@digigov/react-core/Label"));
+
+var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
+
+var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
+
+var _ErrorMessage = _interopRequireDefault(require("@digigov/react-core/ErrorMessage"));
 
 var _Input = _interopRequireDefault(require("@digigov/form/inputs/Input"));
 
@@ -35,9 +43,7 @@ var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
 
 var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
 
-var _Label = _interopRequireDefault(require("@digigov/form/inputs/Label"));
-
-var _NormalText = _interopRequireDefault(require("@digigov/ui/typography/NormalText"));
+var _Label2 = _interopRequireDefault(require("@digigov/form/inputs/Label"));
 
 var _i18n = require("@digigov/ui/app/i18n");
 
@@ -58,10 +64,12 @@ var FIELD_COMPONENTS = {
     component: _FileInput["default"]
   },
   'choice:multiple': {
+    wrapper: "fieldset",
     controlled: true,
     component: _Checkboxes["default"]
   },
   'choice:single': {
+    wrapper: "fieldset",
     controlled: false,
     component: _Radio["default"]
   }
@@ -72,57 +80,35 @@ var ALTERNATIVE_COMPONENTS = {
     controlled: false
   }
 };
-var useFieldContainerStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    fieldContainer: {
-      marginBottom: theme.spacing(2)
-    },
-    fieldLabel: {
-      fontWeight: 500
-    },
-    hint: {
-      color: theme.palette.grey['700']
-    },
-    errorContainer: {
-      borderLeft: "".concat(theme.spacing(0.5), "px solid ").concat(theme.palette.error.main, " "),
-      paddingLeft: theme.spacing(2)
-    },
-    error: {
-      color: theme.palette.error.main,
-      fontWeight: 'bolder',
-      margin: theme.spacing(2, 0)
-    }
-  };
-});
-exports.useFieldContainerStyles = useFieldContainerStyles;
 
 var FieldContainer = function FieldContainer(_ref) {
-  var layout = _ref.layout,
+  var wrapper = _ref.wrapper,
       label = _ref.label,
       children = _ref.children,
       error = _ref.error;
-  var classes = useFieldContainerStyles();
 
   var _useTranslation = (0, _i18n.useTranslation)(),
       t = _useTranslation.t;
 
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    className: classes.fieldContainer,
-    item: true,
-    xs: (layout === null || layout === void 0 ? void 0 : layout.xs) || 12,
-    sm: (layout === null || layout === void 0 ? void 0 : layout.sm) || 12
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: error && classes.errorContainer
-  }, label && /*#__PURE__*/_react["default"].createElement(_Label["default"], {
-    label: label
-  }), error && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_NormalText["default"], {
-    className: classes.error
-  }, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
+  if (wrapper === 'fieldset') {
+    return /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+      error: !!error
+    }, /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, /*#__PURE__*/_react["default"].createElement(_FieldsetLegend["default"], {
+      size: "s"
+    }, label && label.primary, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], null, t((error === null || error === void 0 ? void 0 : error.message) || '')))), children);
+  } else {
+    return /*#__PURE__*/_react["default"].createElement(_Field["default"], {
+      error: !!error
+    }, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, label && /*#__PURE__*/_react["default"].createElement(_Label2["default"], {
+      label: label
+    }), error && /*#__PURE__*/_react["default"].createElement(_ErrorMessage["default"], null, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
+  }
 };
 
 var FieldBase = function FieldBase(props) {
   var name = props.name,
       Component = props.component,
+      wrapper = props.wrapper,
       control = props.control,
       type = props.type,
       _props$controlled = props.controlled,
@@ -146,7 +132,8 @@ var FieldBase = function FieldBase(props) {
     return /*#__PURE__*/_react["default"].createElement(FieldContainer, {
       label: label,
       layout: layout,
-      error: error
+      error: error,
+      wrapper: wrapper
     }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
       control: control,
       name: name,
@@ -172,7 +159,8 @@ var FieldBase = function FieldBase(props) {
   return /*#__PURE__*/_react["default"].createElement(FieldContainer, {
     label: label,
     layout: layout,
-    error: error
+    error: error,
+    wrapper: wrapper
   }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/_react["default"].createElement(Component, {
     name: name,
     ref: register,
@@ -237,6 +225,7 @@ function calculateField(children, field) {
     var _FIELD_COMPONENTS$fie;
 
     calculatedField.component = FIELD_COMPONENTS[field.type].component;
+    calculatedField.wrapper = FIELD_COMPONENTS[field.type].wrapper;
     calculatedField.controlled = ((_FIELD_COMPONENTS$fie = FIELD_COMPONENTS[field.type]) === null || _FIELD_COMPONENTS$fie === void 0 ? void 0 : _FIELD_COMPONENTS$fie.controlled) || false;
   } else {
     var _FIELD_COMPONENTS$str2;
@@ -245,6 +234,7 @@ function calculateField(children, field) {
     calculatedField.controlled = ((_FIELD_COMPONENTS$str2 = FIELD_COMPONENTS.string) === null || _FIELD_COMPONENTS$str2 === void 0 ? void 0 : _FIELD_COMPONENTS$str2.controlled) || false;
   }
 
+  calculatedField.wrapper = calculatedField.wrapper || 'label';
   return calculatedField;
 }
 

package/Fieldset/index.js

@@ -13,9 +13,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
-var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
+var _Fieldset = _interopRequireDefault(require("@digigov/react-core/Fieldset"));
 
-var _Caption = _interopRequireDefault(require("@digigov/ui/typography/Caption"));
+var _FieldsetLegend = _interopRequireDefault(require("@digigov/react-core/FieldsetLegend"));
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
 
 var _form = require("@digigov/form");
 
@@ -31,20 +33,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/_react["default"].createElement(_Title["default"], null, children));
+  return /*#__PURE__*/_react["default"].createElement(_FieldsetLegend["default"], {
+    heading: true,
+    size: "xl"
+  }, children);
 };
 
 exports.FieldsetLabel = FieldsetLabel;
 
 var FieldsetCaption = function FieldsetCaption(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/_react["default"].createElement(_Caption["default"], null, children));
+  return /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, children);
 };
 
 exports.FieldsetCaption = FieldsetCaption;
@@ -108,10 +107,7 @@ var Fieldset = function Fieldset(_ref6) {
     });
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-    container: true,
-    spacing: 1
-  }, children);
+  return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, children);
 };
 
 exports.Fieldset = Fieldset;

package/es/Field/index.js

@@ -5,15 +5,18 @@ import React, { useContext, useMemo } from 'react';
 import { ConditionalField } from '@digigov/form/Field/ConditionalField';
 import { Controller } from 'react-hook-form';
 import { FormContext } from '@digigov/form';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import CoreField from '@digigov/react-core/Field';
+import CoreLabel from '@digigov/react-core/Label';
+import CoreFieldset from '@digigov/react-core/Fieldset';
+import Hint from '@digigov/react-core/Hint';
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
 import Input from '@digigov/form/inputs/Input';
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import Label from '@digigov/form/inputs/Label';
-import NormalText from '@digigov/ui/typography/NormalText';
 import { useTranslation } from '@digigov/ui/app/i18n';
 var FIELD_COMPONENTS = {
   text: {
@@ -26,10 +29,12 @@ var FIELD_COMPONENTS = {
     component: FileInput
   },
   'choice:multiple': {
+    wrapper: "fieldset",
     controlled: true,
     component: Checkboxes
   },
   'choice:single': {
+    wrapper: "fieldset",
     controlled: false,
     component: Radio
   }
@@ -40,56 +45,35 @@ var ALTERNATIVE_COMPONENTS = {
     controlled: false
   }
 };
-export var useFieldContainerStyles = makeStyles(function (theme) {
-  return {
-    fieldContainer: {
-      marginBottom: theme.spacing(2)
-    },
-    fieldLabel: {
-      fontWeight: 500
-    },
-    hint: {
-      color: theme.palette.grey['700']
-    },
-    errorContainer: {
-      borderLeft: "".concat(theme.spacing(0.5), "px solid ").concat(theme.palette.error.main, " "),
-      paddingLeft: theme.spacing(2)
-    },
-    error: {
-      color: theme.palette.error.main,
-      fontWeight: 'bolder',
-      margin: theme.spacing(2, 0)
-    }
-  };
-});
 
 var FieldContainer = function FieldContainer(_ref) {
-  var layout = _ref.layout,
+  var wrapper = _ref.wrapper,
       label = _ref.label,
       children = _ref.children,
       error = _ref.error;
-  var classes = useFieldContainerStyles();
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: classes.fieldContainer,
-    item: true,
-    xs: (layout === null || layout === void 0 ? void 0 : layout.xs) || 12,
-    sm: (layout === null || layout === void 0 ? void 0 : layout.sm) || 12
-  }, /*#__PURE__*/React.createElement("div", {
-    className: error && classes.errorContainer
-  }, label && /*#__PURE__*/React.createElement(Label, {
-    label: label
-  }), error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.error
-  }, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
+  if (wrapper === 'fieldset') {
+    return /*#__PURE__*/React.createElement(CoreField, {
+      error: !!error
+    }, /*#__PURE__*/React.createElement(CoreFieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+      size: "s"
+    }, label && label.primary, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, null, t((error === null || error === void 0 ? void 0 : error.message) || '')))), children);
+  } else {
+    return /*#__PURE__*/React.createElement(CoreField, {
+      error: !!error
+    }, /*#__PURE__*/React.createElement(CoreLabel, null, label && /*#__PURE__*/React.createElement(Label, {
+      label: label
+    }), error && /*#__PURE__*/React.createElement(ErrorMessage, null, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
+  }
 };
 
 export var FieldBase = function FieldBase(props) {
   var name = props.name,
       Component = props.component,
+      wrapper = props.wrapper,
       control = props.control,
       type = props.type,
       _props$controlled = props.controlled,
@@ -113,7 +97,8 @@ export var FieldBase = function FieldBase(props) {
     return /*#__PURE__*/React.createElement(FieldContainer, {
       label: label,
       layout: layout,
-      error: error
+      error: error,
+      wrapper: wrapper
     }, /*#__PURE__*/React.createElement(Controller, {
       control: control,
       name: name,
@@ -139,7 +124,8 @@ export var FieldBase = function FieldBase(props) {
   return /*#__PURE__*/React.createElement(FieldContainer, {
     label: label,
     layout: layout,
-    error: error
+    error: error,
+    wrapper: wrapper
   }, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/React.createElement(Component, {
     name: name,
     ref: register,
@@ -202,6 +188,7 @@ function calculateField(children, field) {
     var _FIELD_COMPONENTS$fie;
 
     calculatedField.component = FIELD_COMPONENTS[field.type].component;
+    calculatedField.wrapper = FIELD_COMPONENTS[field.type].wrapper;
     calculatedField.controlled = ((_FIELD_COMPONENTS$fie = FIELD_COMPONENTS[field.type]) === null || _FIELD_COMPONENTS$fie === void 0 ? void 0 : _FIELD_COMPONENTS$fie.controlled) || false;
   } else {
     var _FIELD_COMPONENTS$str2;
@@ -210,6 +197,7 @@ function calculateField(children, field) {
     calculatedField.controlled = ((_FIELD_COMPONENTS$str2 = FIELD_COMPONENTS.string) === null || _FIELD_COMPONENTS$str2 === void 0 ? void 0 : _FIELD_COMPONENTS$str2.controlled) || false;
   }
 
+  calculatedField.wrapper = calculatedField.wrapper || 'label';
   return calculatedField;
 }
 

package/es/Fieldset/index.js

@@ -1,24 +1,22 @@
 import React, { useContext, useMemo } from 'react';
 import Grid from '@material-ui/core/Grid';
-import Title from '@digigov/ui/typography/Title';
-import Caption from '@digigov/ui/typography/Caption';
+import CoreFieldset from '@digigov/react-core/Fieldset';
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+import Hint from '@digigov/react-core/Hint';
 import { FormContext } from '@digigov/form';
 import Field from '@digigov/form/Field';
 import NormalText from '@digigov/ui/typography/NormalText';
 import { useTranslation } from '@digigov/ui/app/i18n';
 export var FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Title, null, children));
+  return /*#__PURE__*/React.createElement(FieldsetLegend, {
+    heading: true,
+    size: "xl"
+  }, children);
 };
 export var FieldsetCaption = function FieldsetCaption(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Caption, null, children));
+  return /*#__PURE__*/React.createElement(Hint, null, children);
 };
 export var FieldsetBody = function FieldsetBody(_ref3) {
   var children = _ref3.children;
@@ -74,9 +72,6 @@ export var Fieldset = function Fieldset(_ref6) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1
-  }, children);
+  return /*#__PURE__*/React.createElement(CoreFieldset, null, children);
 };
 export default Fieldset;

package/es/inputs/Checkboxes/index.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import clsx from 'clsx';
-import MuiCheckbox from '@material-ui/core/Checkbox';
-import { makeStyles } from '@material-ui/core/styles';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Label from '@digigov/form/inputs/Label';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import CoreCheckboxes from '@digigov/react-core/Checkbox';
+import CheckboxItem from '@digigov/react-core/CheckboxItem';
+import Hint from '@digigov/react-core/Hint';
 
 var Checkboxes = function Checkboxes(_ref) {
   var name = _ref.name,
@@ -33,56 +31,20 @@ var Checkboxes = function Checkboxes(_ref) {
     };
   };
 
-  return /*#__PURE__*/React.createElement(FormGroup, {
-    id: name,
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(CoreCheckboxes, {
     className: className
   }, options.map(function (option, key) {
-    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+    return /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+      name: name,
       disabled: disabled,
       key: key,
       checked: value.includes(option.value),
-      onChange: handleChange
-    }, option));
+      onChange: handleChange(option.value)
+    }, option), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));
   }));
 };
 
-var useCheckboxStyles = makeStyles(function (theme) {
-  return {
-    formControlLabelActive: {
-      backgroundColor: theme.palette.grey['200'],
-      border: "2px solid ".concat(theme.palette.primary.main)
-    },
-    formControlLabel: {
-      fontWeight: 'bolder',
-      padding: theme.spacing(0.5),
-      margin: theme.spacing(0.5, 0)
-    }
-  };
-});
-
-var Checkbox = function Checkbox(_ref2) {
-  var className = _ref2.className,
-      checked = _ref2.checked,
-      value = _ref2.value,
-      label = _ref2.label,
-      onChange = _ref2.onChange,
-      disabled = _ref2.disabled;
-  var classes = useCheckboxStyles();
-  return /*#__PURE__*/React.createElement(FormControlLabel, {
-    key: value,
-    className: clsx(classes.formControlLabel, checked && classes.formControlLabelActive, className),
-    control: /*#__PURE__*/React.createElement(MuiCheckbox, {
-      checked: checked,
-      disabled: disabled,
-      color: "primary",
-      onChange: onChange(value),
-      name: value
-    }),
-    label: /*#__PURE__*/React.createElement(Label, {
-      label: label,
-      value: value
-    })
-  });
-};
-
 export default Checkboxes;

package/es/inputs/FileInput/index.js

@@ -1,35 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import NormalText from '@digigov/ui/typography/NormalText';
-import Button from '@digigov/ui/core/Button';
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      '& > *': {
-        margin: theme.spacing(1)
-      }
-    },
-    input: {
-      display: 'none'
-    },
-    button: {
-      margin: 0
-    },
-    text: {
-      marginLeft: theme.spacing(2),
-      position: 'relative',
-      top: theme.spacing(0.5)
-    }
-  };
-});
+import NormalText from '@digigov/react-core/NormalText';
+import FileUpload from '@digigov/react-core/FileUpload';
 var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,
       _ref$extra = _ref.extra,
       extra = _ref$extra === void 0 ? {} : _ref$extra,
       disabled = _ref.disabled;
-  var classes = useStyles();
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -38,16 +15,13 @@ var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
 
   var filesLabel = extra.multiple ? 'αρχεία' : 'αρχείο';
   return /*#__PURE__*/React.createElement("div", {
-    className: (classes.root, extra.className)
-  }, /*#__PURE__*/React.createElement(TextField, {
+    className: extra.className
+  }, /*#__PURE__*/React.createElement(FileUpload, {
+    ref: ref,
     name: name,
     id: name,
     disabled: disabled,
     type: 'file',
-    inputProps: {
-      multiple: extra.multiple,
-      accept: extra.accept
-    },
     onChange: function onChange(e) {
       var target = e.target;
       var selectedFiles = Array.from(target.files).map(function (_ref2) {
@@ -55,16 +29,7 @@ var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
         return name;
       });
       setFiles(selectedFiles);
-    },
-    className: classes.input,
-    inputRef: ref
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: name
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    className: classes.button
-  }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 ", filesLabel)), /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.text
-  }, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
+    }
+  }), /*#__PURE__*/React.createElement(NormalText, null, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
 });
 export default FileInput;

package/es/inputs/Input/index.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "type", "extra"];
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextInput from '@digigov/react-core/TextInput';
+import TextArea from '@digigov/react-core/TextArea';
 var TYPES_MAP = {
   string: 'text',
   "int": 'number',
@@ -16,10 +17,9 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _ref2 = extra || {},
-      multiline = _ref2.multiline,
+      _ref2$multiline = _ref2.multiline,
+      multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
       rows = _ref2.rows,
-      _ref2$fullWidth = _ref2.fullWidth,
-      fullWidth = _ref2$fullWidth === void 0 ? true : _ref2$fullWidth,
       className = _ref2.className; // if enforced to multiline use true. Derive from type otherwise.
 
 
@@ -28,17 +28,20 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
   rows = rows || (multiline ? 4 : 1); // translate dilosi type to HTML Input type
 
   var fieldType = TYPES_MAP[type || 'text'] || 'text';
-  return /*#__PURE__*/React.createElement(TextField, _extends({
-    id: name,
-    name: name,
-    type: fieldType,
-    className: className,
-    fullWidth: fullWidth,
-    multiline: multiline,
-    rows: rows,
-    margin: "normal",
-    variant: "outlined",
-    inputRef: ref
-  }, props));
+
+  if (multiline === true) {
+    return /*#__PURE__*/React.createElement(TextArea, _extends({
+      name: name,
+      className: className,
+      rows: rows,
+      ref: ref
+    }, props));
+  } else {
+    return /*#__PURE__*/React.createElement(TextInput, _extends({
+      name: name,
+      type: fieldType,
+      ref: ref
+    }, props));
+  }
 });
 export default Input;