@digigov/form 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/Field/FieldBase/index.js

@@ -40,6 +40,7 @@ export var FieldBase = function FieldBase(props) {
       render: function render(_ref) {
         var field = _ref.field;
         return /*#__PURE__*/React.createElement(Component, _extends({}, field, {
+          ref: undefined,
           defaultValue: defaultValue,
           extra: extra,
           error: !!error,

package/Field/utils/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { lazy, useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { FormContext } from '@digigov/form/FormContext';
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import DateInput from '@digigov/form/inputs/DateInput';
@@ -9,9 +9,7 @@ import Input from '@digigov/form/inputs/Input';
 import OtpInput from '@digigov/form/inputs/OtpInput';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
-var AutoCompleteInput = /*#__PURE__*/lazy(function () {
-  return import('@digigov/form/inputs/AutoCompleteInput');
-});
+import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -55,7 +53,8 @@ var ALTERNATIVE_COMPONENTS = {
   },
   AutoComplete: {
     component: AutoCompleteInput,
-    controlled: true
+    controlled: true,
+    wrapper: 'fieldset'
   }
 };
 export function calculateField(children, field, componentRegistry) {
@@ -75,6 +74,7 @@ export function calculateField(children, field, componentRegistry) {
     var _ALTERNATIVE_COMPONEN;
     calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
     calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
+    calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
   } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
     var _fieldComponentRegist2;
     calculatedField.component = fieldComponentRegistry[field.type].component;

package/FieldObject/index.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
 import { calculateField } from '@digigov/form/Field/utils';
 import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
-import { FieldsetLegend } from '@digigov/react-core';
+import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
 import { useTranslation } from '@digigov/ui/i18n';
 export var FieldObject = function FieldObject(_ref) {
   var name = _ref.name,

package/MultiplicityField/__stories__/PreviewDisplay/index.js

@@ -57,14 +57,20 @@ export var PreviewDisplay = function PreviewDisplay() {
   return /*#__PURE__*/React.createElement(Layout, null, _ref, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, _ref2, _ref3, _ref4, /*#__PURE__*/React.createElement(Card, {
     variant: "border",
     borderColor: "dark"
-  }, _ref5, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+  }, _ref5, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(SummaryList, {
+    noLastBorder: true,
+    marginBottom: 0
+  }, fields && fields.map(function (field, index) {
     return /*#__PURE__*/React.createElement(SummaryListItem, {
       key: index
     }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));
   })))), /*#__PURE__*/React.createElement(Card, {
     variant: "border",
     borderColor: "dark"
-  }, _ref6, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.map(function (field, index) {
+  }, _ref6, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(SummaryList, {
+    noLastBorder: true,
+    marginBottom: 0
+  }, fields && fields.map(function (field, index) {
     return /*#__PURE__*/React.createElement(SummaryListItem, {
       key: index
     }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value));

package/MultiplicityField/index.js

@@ -6,7 +6,12 @@ import { useFieldArray } from 'react-hook-form';
 import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
 import FieldObject from '@digigov/form/FieldObject';
 import AddObjects from '@digigov/form/MultiplicityField/add-objects';
-import { Card, CardContent, CardAction, Button, Heading, CardHeading } from '@digigov/react-core';
+import { Card } from '@digigov/react-core/Card';
+import { CardContent } from '@digigov/react-core/CardContent';
+import { CardAction } from '@digigov/react-core/CardAction';
+import { Button } from '@digigov/react-core/Button';
+import { Heading } from '@digigov/react-core/Heading';
+import { CardHeading } from '@digigov/react-core/CardHeading';
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export var Multiplicity = function Multiplicity(_ref) {
   var extra = _ref.extra,

package/cjs/Field/FieldBase/index.js

@@ -47,6 +47,7 @@ var FieldBase = exports.FieldBase = function FieldBase(props) {
       render: function render(_ref) {
         var field = _ref.field;
         return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, field, {
+          ref: undefined,
           defaultValue: defaultValue,
           extra: extra,
           error: !!error,

package/cjs/Field/utils/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.calculateField = calculateField;
 exports.evaluateFieldWithConditions = evaluateFieldWithConditions;
 exports.useField = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _FormContext = require("@digigov/form/FormContext");
@@ -19,13 +18,7 @@ var _Input = _interopRequireDefault(require("@digigov/form/inputs/Input"));
 var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
 var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
 var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2["default"])(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var AutoCompleteInput = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('@digigov/form/inputs/AutoCompleteInput'));
-  });
-});
+var _AutoCompleteInput = _interopRequireDefault(require("@digigov/form/inputs/AutoCompleteInput"));
 var FIELD_COMPONENTS = {
   text: {
     component: _Input["default"]
@@ -68,8 +61,9 @@ var ALTERNATIVE_COMPONENTS = {
     controlled: false
   },
   AutoComplete: {
-    component: AutoCompleteInput,
-    controlled: true
+    component: _AutoCompleteInput["default"],
+    controlled: true,
+    wrapper: 'fieldset'
   }
 };
 function calculateField(children, field, componentRegistry) {
@@ -89,6 +83,7 @@ function calculateField(children, field, componentRegistry) {
     var _ALTERNATIVE_COMPONEN;
     calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
     calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
+    calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
   } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
     var _fieldComponentRegist2;
     calculatedField.component = fieldComponentRegistry[field.type].component;

package/cjs/FieldObject/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _FieldBase = require("@digigov/form/Field/FieldBase");
 var _utils = require("@digigov/form/Field/utils");
 var _Fieldset = _interopRequireWildcard(require("@digigov/form/Fieldset"));
-var _reactCore = require("@digigov/react-core");
+var _FieldsetLegend = require("@digigov/react-core/cjs/FieldsetLegend");
 var _i18n = require("@digigov/ui/cjs/i18n");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -25,7 +25,7 @@ var FieldObject = exports.FieldObject = function FieldObject(_ref) {
     formState = _ref.formState;
   var _useTranslation = (0, _i18n.useTranslation)(),
     t = _useTranslation.t;
-  return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/_react["default"].createElement(_reactCore.FieldsetLegend, {
+  return /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, (label === null || label === void 0 ? void 0 : label.primary) && /*#__PURE__*/_react["default"].createElement(_FieldsetLegend.FieldsetLegend, {
     size: "sm"
   }, t(label.primary)), (label === null || label === void 0 ? void 0 : label.secondary) && /*#__PURE__*/_react["default"].createElement(_Fieldset.FieldsetCaption, null, t(label.secondary)), extra === null || extra === void 0 ? void 0 : extra.fields.map(function (field) {
     return /*#__PURE__*/_react["default"].createElement(FieldObjectItem, {

package/cjs/MultiplicityField/__stories__/PreviewDisplay/index.js

@@ -67,14 +67,20 @@ var PreviewDisplay = exports.PreviewDisplay = function PreviewDisplay() {
   return /*#__PURE__*/_react["default"].createElement(_Basic["default"], null, _ref, /*#__PURE__*/_react["default"].createElement(_Basic.Container, null, /*#__PURE__*/_react["default"].createElement(_Basic.Main, null, _ref2, _ref3, _ref4, /*#__PURE__*/_react["default"].createElement(_ui.Card, {
     variant: "border",
     borderColor: "dark"
-  }, _ref5, /*#__PURE__*/_react["default"].createElement(_ui.CardContent, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, fields && fields.map(function (field, index) {
+  }, _ref5, /*#__PURE__*/_react["default"].createElement(_ui.CardContent, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], {
+    noLastBorder: true,
+    marginBottom: 0
+  }, fields && fields.map(function (field, index) {
     return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, field.value));
   })))), /*#__PURE__*/_react["default"].createElement(_ui.Card, {
     variant: "border",
     borderColor: "dark"
-  }, _ref6, /*#__PURE__*/_react["default"].createElement(_ui.CardContent, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], null, fields && fields.map(function (field, index) {
+  }, _ref6, /*#__PURE__*/_react["default"].createElement(_ui.CardContent, null, /*#__PURE__*/_react["default"].createElement(_SummaryList["default"], {
+    noLastBorder: true,
+    marginBottom: 0
+  }, fields && fields.map(function (field, index) {
     return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
       key: index
     }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, field.value));

package/cjs/MultiplicityField/index.js

@@ -14,7 +14,12 @@ var _reactHookForm = require("react-hook-form");
 var _FieldBaseContainer = _interopRequireDefault(require("@digigov/form/Field/FieldBaseContainer"));
 var _FieldObject = _interopRequireDefault(require("@digigov/form/FieldObject"));
 var _addObjects = _interopRequireDefault(require("@digigov/form/MultiplicityField/add-objects"));
-var _reactCore = require("@digigov/react-core");
+var _Card = require("@digigov/react-core/cjs/Card");
+var _CardContent = require("@digigov/react-core/cjs/CardContent");
+var _CardAction = require("@digigov/react-core/cjs/CardAction");
+var _Button = require("@digigov/react-core/cjs/Button");
+var _Heading = require("@digigov/react-core/cjs/Heading");
+var _CardHeading = require("@digigov/react-core/cjs/CardHeading");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
@@ -59,7 +64,7 @@ var Multiplicity = exports.Multiplicity = function Multiplicity(_ref) {
     error: formState.isSubmitted && !formState.isSubmitting && error !== null && error !== void 0 && error.message ? error : undefined,
     wrapper: "fieldset",
     name: name
-  }, stashedObjects.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactCore.Heading, {
+  }, stashedObjects.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
     size: "md"
   }, extra === null || extra === void 0 ? void 0 : extra.label.object.title_added), stashedObjects.map(function (_Object, index) {
     return /*#__PURE__*/_react["default"].createElement(ListObject, {
@@ -101,14 +106,14 @@ var ListObject = exports.ListObject = function ListObject(_ref2) {
     onDelete = _ref2.onDelete,
     formState = _ref2.formState;
   var currentName = "".concat(name, ".").concat(index);
-  return /*#__PURE__*/_react["default"].createElement(_reactCore.Card, {
+  return /*#__PURE__*/_react["default"].createElement(_Card.Card, {
     variant: (extra === null || extra === void 0 ? void 0 : extra.border) && 'border'
-  }, /*#__PURE__*/_react["default"].createElement(_reactCore.CardHeading, null, extra === null || extra === void 0 ? void 0 : extra.label.object.title, " #", index + 1), /*#__PURE__*/_react["default"].createElement(_reactCore.CardContent, null, /*#__PURE__*/_react["default"].createElement(_FieldObject["default"], (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_CardHeading.CardHeading, null, extra === null || extra === void 0 ? void 0 : extra.label.object.title, " #", index + 1), /*#__PURE__*/_react["default"].createElement(_CardContent.CardContent, null, /*#__PURE__*/_react["default"].createElement(_FieldObject["default"], (0, _extends2["default"])({
     name: currentName,
     formState: formState,
     register: register,
     control: control
-  }, extra === null || extra === void 0 ? void 0 : extra.of))), /*#__PURE__*/_react["default"].createElement(_reactCore.CardAction, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Button, {
+  }, extra === null || extra === void 0 ? void 0 : extra.of))), /*#__PURE__*/_react["default"].createElement(_CardAction.CardAction, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     type: "button",
     variant: "link",
     onClick: function onClick() {

package/cjs/inputs/AutoCompleteInput/AutoComplete.stories/index.js

@@ -19,6 +19,18 @@ Object.keys(_Default).forEach(function (key) {
     }
   });
 });
+var _Multiple = require("@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple");
+Object.keys(_Multiple).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Multiple[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Multiple[key];
+    }
+  });
+});
 var _default = exports["default"] = {
   title: 'Digigov Form/inputs/AutoCompleteInput',
   component: _AutoCompleteInput["default"],

package/cjs/inputs/AutoCompleteInput/__stories__/Default/index.js

@@ -1,32 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _Field = require("@digigov/form/Field");
 var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
-var _utils = require("@digigov/ui/cjs/form/AutoComplete/utils");
 var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 var fields = [{
   key: 'autocomplete',
   label: {
-    primary: 'An autocomplete field'
+    primary: 'Επιλέξτε ήπειρο'
   },
   required: true,
   type: 'choice:single',
   extra: {
     component: 'AutoComplete',
-    options: _utils.results.map(function (r) {
+    options: results.map(function (r) {
       return {
         label: {
           primary: r,
-          secondary: "Country: ".concat(r)
+          secondary: "'\u0397\u03C0\u03B5\u03B9\u03C1\u03BF\u03C2: ".concat(r)
         },
         value: r.toLowerCase()
       };
@@ -34,14 +31,11 @@ var fields = [{
   }
 }];
 var initialValues = {};
-var _ref = /*#__PURE__*/_react["default"].createElement("div", null, "loading");
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
   type: "submit"
 }, "Submit");
 var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
-    fallback: _ref
-  }, /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
     fields: fields,
     onSubmit: function onSubmit(data) {
       console.log(data);
@@ -52,5 +46,6 @@ var Default = exports.Default = function Default() {
       key: field.key,
       name: field.key
     });
-  }), _ref2));
-};
+  }), _ref);
+};
+var _default = exports["default"] = Default;

package/cjs/inputs/AutoCompleteInput/__stories__/Multiple/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Multiple = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Field = require("@digigov/form/Field");
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
+var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
+var results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'Επιλέξτε ήπειρο'
+  },
+  required: true,
+  type: 'choice:multiple',
+  extra: {
+    component: 'AutoComplete',
+    multiple: true,
+    options: results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "\u0389\u03C0\u03B5\u03B9\u03C1\u03BF\u03C2: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  type: "submit"
+}, "Submit");
+var Multiple = exports.Multiple = function Multiple() {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};
+var _default = exports["default"] = Multiple;

package/cjs/inputs/AutoCompleteInput/index.js

@@ -9,33 +9,44 @@ exports["default"] = exports.AutoCompleteInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactCore = require("@digigov/react-core");
+var _Hint = require("@digigov/react-core/cjs/Hint");
 var _AutoComplete = _interopRequireDefault(require("@digigov/ui/cjs/form/AutoComplete"));
-var _excluded = ["name", "extra", "onChange", "value"];
+var _excluded = ["name", "extra", "onChange", "value", "error"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var AutoCompleteInput = exports.AutoCompleteInput = function AutoCompleteInput(_ref) {
   var name = _ref.name,
-    options = _ref.extra.options,
+    _ref$extra = _ref.extra,
+    options = _ref$extra.options,
+    multiple = _ref$extra.multiple,
     onChange = _ref.onChange,
     value = _ref.value,
+    error = _ref.error,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var suggest = (0, _react.useCallback)(function suggest(query, syncResults) {
     syncResults(query ? options.filter(function (option) {
       var _option$label, _option$label2;
       return "".concat(option.value, " ").concat(((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.primary) || '', " ").concat(((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.secondary) || '').toLowerCase().indexOf(query.toLowerCase()) !== -1;
-    }) : []);
-  }, []);
+    }) : options);
+  }, [options]);
   return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], (0, _extends2["default"])({
+    multiple: multiple,
     source: suggest,
     onConfirm: function onConfirm(value) {
-      onChange(value.value);
+      if (Array.isArray(value)) {
+        var selectedValues = value.map(function (item) {
+          return item.value;
+        });
+        selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+      } else {
+        onChange(value.value);
+      }
     },
     templates: {
       suggestion: function suggestion(_ref2) {
         var label = _ref2.label,
           value = _ref2.value;
-        return /*#__PURE__*/_react["default"].createElement("div", null, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_reactCore.Hint, null, label.secondary));
+        return /*#__PURE__*/_react["default"].createElement("div", null, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint.Hint, null, label.secondary));
       },
       inputValue: function inputValue(option) {
         if (!option) {
@@ -44,7 +55,10 @@ var AutoCompleteInput = exports.AutoCompleteInput = function AutoCompleteInput(_
         return option.label.primary || option.value;
       }
     }
-  }, props, {
+  }, (0, _extends2["default"])({}, props, {
+    reset: undefined,
+    required: undefined
+  }), {
     id: "".concat(name, "-id"),
     defaultValue: value
   }));

package/cjs/inputs/AutoCompleteInput/index.mdx

@@ -0,0 +1,29 @@
+---
+title: AutoComplete Input 
+---
+ 
+# AutoComplete input
+
+AutoCompleteInput element is an enhanced version of text input that shows suggested 
+options as the users type and also let them select an option from the list.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Default.tsx"
+/>
+
+### Display multiple values
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/AutoCompleteInput"
+  story="Multiple.tsx"
+/>
+
+
+

package/cjs/inputs/Checkboxes/__stories__/Conditional/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Conditional = void 0;
+exports["default"] = exports.Conditional = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _form = _interopRequireWildcard(require("@digigov/form"));
 var _Button = require("@digigov/ui/cjs/form/Button");
@@ -99,4 +99,5 @@ var Conditional = exports.Conditional = function Conditional() {
     },
     fields: fields
   }, _ref, _ref2);
-};
+};
+var _default = exports["default"] = Conditional;

package/cjs/inputs/Checkboxes/index.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _form = require("@digigov/form");
-var _reactCore = require("@digigov/react-core");
+var _CheckboxConditional = require("@digigov/react-core/cjs/CheckboxConditional");
 var _Checkbox = _interopRequireDefault(require("@digigov/react-core/cjs/Checkbox"));
 var _CheckboxItem = _interopRequireDefault(require("@digigov/react-core/cjs/CheckboxItem"));
 var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
@@ -90,7 +90,7 @@ var Checkboxes = exports.Checkboxes = function Checkboxes(_ref) {
       required: undefined,
       'aria-describedby': undefined,
       type: 'checkbox'
-    })), label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary))), !!checked[index] && show && /*#__PURE__*/_react["default"].createElement(_reactCore.CheckboxConditional, null, show.map(function (fieldName) {
+    })), label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary))), !!checked[index] && show && /*#__PURE__*/_react["default"].createElement(_CheckboxConditional.CheckboxConditional, null, show.map(function (fieldName) {
       return /*#__PURE__*/_react["default"].createElement(_form.Field, {
         name: fieldName,
         key: fieldName

package/cjs/inputs/Checkboxes/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Checkbox
+---
+ 
+# Checkboxes
+Input element of type `checkbox` are rendered by default as boxes that are checked when activated.
+Checkboxes are used to let a user select one or more options of a limited number of choices.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Default.tsx"
+/>
+
+### Conditional
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Conditional.tsx"
+/>
+
+### With divider
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="WithDivider.tsx"
+/>

package/cjs/inputs/DateInput/index.mdx

@@ -0,0 +1,23 @@
+---
+title: Date Input
+---
+ 
+# Date input
+
+
+
+Input element of type `date` create input fields that let the user enter a date, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/DateInput"
+  story="Default.tsx"
+/>
+
+
+

package/cjs/inputs/FileInput/index.mdx

@@ -0,0 +1,19 @@
+---
+title: File Input
+---
+ 
+# File input
+
+
+
+Input element of type `file` let the user choose one or more files from their device storage.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/FileInput"
+  story="Default.tsx"
+/>

package/cjs/inputs/ImageInput/index.mdx

@@ -0,0 +1,19 @@
+---
+title: Image Input
+---
+ 
+# Image input
+
+
+
+Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/ImageInput"
+  story="Default.tsx"
+/>

package/cjs/inputs/Input/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
-var _reactCore = require("@digigov/react-core");
+var _Hint = require("@digigov/react-core/cjs/Hint");
 var _TextArea = _interopRequireDefault(require("@digigov/react-core/cjs/TextArea"));
 var _TextInput = _interopRequireDefault(require("@digigov/react-core/cjs/TextInput"));
 var _i18n = require("@digigov/ui/cjs/i18n");
@@ -56,7 +56,7 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function W
       reset: undefined,
       required: undefined,
       type: fieldType
-    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/_react["default"].createElement(_reactCore.Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/_react["default"].createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/_react["default"].createElement("span", {
+    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/_react["default"].createElement(_Hint.Hint, null, currentValue === undefined || (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) >= 0 && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) <= (limit === null || limit === void 0 ? void 0 : limit.max) ? /*#__PURE__*/_react["default"].createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/_react["default"].createElement("b", null, !currentValue ? limit.max : (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length)), ' ', currentValue && (limit === null || limit === void 0 ? void 0 : limit.max) - (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.remaining'), ".") : /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         color: '#b60202'
       }