@digigov/form 0.4.5 → 0.4.9

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,11 +17,12 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _ref2 = extra || {},
-      multiline = _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.
+      _ref2$multiline = _ref2.multiline,
+      multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
+      rows = _ref2.rows;
+
+  var _ref3 = extra || {},
+      className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
 
 
   multiline = multiline === true || type === 'text'; // use explicit rows value if set. Derive from multiline otherwise.
@@ -28,17 +30,21 @@ 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,
+      className: className,
+      ref: ref
+    }, props));
+  }
 });
 export default Input;

package/es/inputs/Label/index.js

@@ -1,29 +1,11 @@
 import React from 'react';
-import clsx from 'clsx';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import NormalText from '@digigov/ui/typography/NormalText';
+import LabelTitle from '@digigov/react-core/LabelTitle';
+import Hint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/app/i18n';
-var useLabelStyles = makeStyles(function (theme) {
-  return {
-    labels: {
-      padding: theme.spacing(1, 0)
-    },
-    primaryLabel: {
-      fontWeight: 500,
-      lineHeight: '1.5em'
-    },
-    secondaryLabel: {
-      fontWeight: 'normal',
-      color: theme.palette.grey['700']
-    }
-  };
-});
 export var Label = function Label(_ref) {
   var className = _ref.className,
       label = _ref.label,
       value = _ref.value;
-  var classes = useLabelStyles();
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -32,20 +14,10 @@ export var Label = function Label(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: clsx(classes.labels, className)
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.primaryLabel
-  }, label && label.primary && t(label.primary) || value)), label && label.secondary && /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.secondaryLabel
-  }, t(label.secondary))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelTitle, {
+    className: className,
+    size: "s"
+  }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
 };
 Label.defaultProps = {
   label: {}

package/es/inputs/Radio/index.js

@@ -1,79 +1,18 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Label from '@digigov/form/inputs/Label';
+import Radio from '@digigov/react-core/Radio';
+import RadioItem from '@digigov/react-core/RadioItem';
+import { useTranslation } from '@digigov/ui/app/i18n';
 import { useWatch } from 'react-hook-form';
-var useRadioButtonStyles = makeStyles(function (theme) {
-  return {
-    dense: {
-      margin: theme.spacing(1, 0)
-    },
-    formControlLabelActive: {
-      backgroundColor: theme.palette.grey['200'],
-      border: "2px solid ".concat(theme.palette.primary.main)
-    },
-    formControlLabel: {
-      width: '100%',
-      alignItems: 'flex-start',
-      fontWeight: 'bolder',
-      padding: theme.spacing(0.5),
-      margin: theme.spacing(0.5, 0)
-    }
-  };
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(Radio, {
-  color: "primary"
-});
-
-export var RadioButton = function RadioButton(_ref) {
-  var dense = _ref.dense,
-      value = _ref.value,
-      label = _ref.label,
-      register = _ref.register,
-      active = _ref.active,
+import Hint from '@digigov/react-core/Hint';
+export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
+  var register = _ref.register,
       name = _ref.name,
+      control = _ref.control,
+      _ref$extra = _ref.extra,
+      options = _ref$extra.options,
+      className = _ref$extra.className,
       disabled = _ref.disabled;
-  var classes = useRadioButtonStyles();
-  return /*#__PURE__*/React.createElement(FormControlLabel, {
-    className: clsx(classes.formControlLabel, active && classes.formControlLabelActive, dense && classes.dense),
-    value: value,
-    name: name,
-    disabled: disabled,
-    inputRef: register,
-    control: _ref2,
-    label: /*#__PURE__*/React.createElement(Label, {
-      label: label,
-      value: value
-    })
-  });
-};
-var useRadioButtonsGroupStyles = makeStyles(function (theme) {
-  return {
-    formControl: {
-      margin: theme.spacing(0, 0, 2, 0),
-      width: '100%'
-    },
-    dense: {
-      margin: theme.spacing(1, 0)
-    }
-  };
-});
-export var RadioButtonsGroup = function RadioButtonsGroup(_ref3) {
-  var name = _ref3.name,
-      register = _ref3.register,
-      control = _ref3.control,
-      _ref3$extra = _ref3.extra,
-      options = _ref3$extra.options,
-      dense = _ref3$extra.dense,
-      className = _ref3$extra.className,
-      disabled = _ref3.disabled;
-  var classes = useRadioButtonsGroupStyles();
   var currentValue = useWatch({
     control: control,
     name: name
@@ -83,26 +22,24 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref3) {
       _useState2 = _slicedToArray(_useState, 1),
       defaultValue = _useState2[0];
 
-  return /*#__PURE__*/React.createElement(FormControl, {
-    component: "fieldset",
-    className: clsx(className, classes.formControl, dense && classes.dense)
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(Radio, {
+    className: className,
     defaultValue: defaultValue,
-    id: name,
-    name: name
-  }, options.map(function (_ref4) {
-    var label = _ref4.label,
-        v = _ref4.value,
-        optionDisabled = _ref4.disabled;
-    return /*#__PURE__*/React.createElement(RadioButton, {
+    id: name
+  }, options.map(function (_ref2) {
+    var label = _ref2.label,
+        v = _ref2.value,
+        optionDisabled = _ref2.disabled;
+    return /*#__PURE__*/React.createElement(RadioItem, {
+      ref: register,
       key: v,
-      label: label,
       name: name,
-      active: v === currentValue,
       value: v,
-      register: register,
       disabled: disabled || optionDisabled
-    });
-  })));
+    }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
+  }));
 };
 export default RadioButtonsGroup;

package/es/inputs/Select/index.js

@@ -1,20 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import MuiSelect from '@material-ui/core/Select';
-var useSelectStyles = makeStyles(function (theme) {
-  return {
-    formControl: {
-      minWidth: 120
-    },
-    selectEmpty: {
-      marginTop: theme.spacing(2)
-    }
-  };
-});
+import CoreSelect from '@digigov/react-core/Select';
+import SelectOption from '@digigov/react-core/SelectOption';
 
-var _ref2 = /*#__PURE__*/React.createElement("option", {
+var _ref2 = /*#__PURE__*/React.createElement(SelectOption, {
   value: ""
 });
 
@@ -24,27 +12,18 @@ export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, r
       options = _ref$extra.options,
       className = _ref$extra.className,
       disabled = _ref.disabled;
-  var classes = useSelectStyles();
-  return /*#__PURE__*/React.createElement(FormControl, {
-    variant: "outlined",
-    className: clsx(className, classes.formControl)
-  }, /*#__PURE__*/React.createElement(MuiSelect, {
-    "native": true,
-    autoWidth: true,
-    inputRef: ref,
-    inputProps: {
-      name: name,
-      id: name
-    },
+  return /*#__PURE__*/React.createElement(CoreSelect, {
+    className: className,
+    ref: ref,
+    name: name,
     disabled: disabled
   }, _ref2, options.map(function (_ref3) {
     var value = _ref3.value,
         label = _ref3.label;
-    return /*#__PURE__*/React.createElement("option", {
+    return /*#__PURE__*/React.createElement(SelectOption, {
       key: value,
-      value: value,
-      title: label && label.secondary
+      value: value
     }, label && label.primary ? label.primary : value);
-  })));
+  }));
 });
 export default Select;

package/es/utils.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var parseErrorSchema = function parseErrorSchema(error, validateAllFieldCriteria) {
   return Array.isArray(error.inner) && error.inner.length ? error.inner.reduce(function (previous, _ref) {
     var path = _ref.path,

package/es/validators.js

@@ -366,7 +366,8 @@ function computeShape(fields, yupTypeMap, validatorRegistry) {
   return fieldSchemas;
 }
 
-function getYupObjectShape(fields, yupTypeMap, validatorRegistry) {
+function getYupObjectShape( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+fields, yupTypeMap, validatorRegistry) {
   if (!fields.current) {
     var fieldSchemas = computeShape(fields, yupTypeMap, validatorRegistry);
     return yup.object().shape(fieldSchemas);
@@ -407,7 +408,6 @@ var getYUPTypeMap = function getYUPTypeMap() {
     iban: function iban(field) {
       return yup.string().test(IBAN_VALIDATOR(field));
     },
-    // eslint-disable-next-line @typescript-eslint/camelcase
     mobile_phone: function mobile_phone() {
       return yup.string().test(MOBILE_PHONE_VALIDATOR);
     },
@@ -419,9 +419,9 @@ var getYUPTypeMap = function getYUPTypeMap() {
     }
   };
   return yupTypeMap;
-}; // Create a yup validation schema from given fields input
-
+};
 
+// Create a yup validation schema from given fields input
 export function useValidationSchema(fields, validatorRegistry) {
   return useMemo(function () {
     var yupTypeMap = getYUPTypeMap();

package/esm/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/esm/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/esm/Questions/Step/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useContext, useState } from 'react';
 import { QuestionsContext } from '@digigov/form/Questions/';
 import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.4.5
+/** @license Digigov v0.4.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6,6 +6,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useCallback, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@digigov/form/utils';

package/esm/index.mdx

@@ -3,10 +3,7 @@ title: Form
 parent: docs/ui/components
 ---
 
-import { useState, useEffect } from 'react';
 import FormBuilder from '@digigov/form/';
-import PropsDoc from '@docs-components/propsDoc';
-import StylesDoc from '@docs-components/stylesDoc';
 
 export const fields = [
   {

package/esm/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,
@@ -22,8 +20,12 @@ var Checkboxes = function Checkboxes(_ref) {
       var newValue;
 
       if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
@@ -33,56 +35,22 @@ 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,
+      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
       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;