@digigov/form 0.10.15 → 0.11.0

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Change Log - @digigov/form
 
-This log was last generated on Mon, 13 Mar 2023 10:21:39 GMT and should not be manually modified.
+This log was last generated on Tue, 02 May 2023 09:16:06 GMT and should not be manually modified.
+
+## 0.11.0
+Tue, 02 May 2023 09:16:06 GMT
+
+### Minor changes
+
+- Create OtpInput component, add validators and types
+
+### Patches
+
+- Update form stories
+
+## 0.10.16
+Mon, 03 Apr 2023 11:13:15 GMT
+
+### Patches
+
+- change date value for nullable input
+- add nullable in yup validator for conditionable fields
 
 ## 0.10.15
 Mon, 13 Mar 2023 10:21:39 GMT

package/Field/utils.js

@@ -27,6 +27,8 @@ var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"
 
 var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
 
+var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
+
 var _FormContext = require("@digigov/form/FormContext");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,6 +56,11 @@ var FIELD_COMPONENTS = {
     controlled: true,
     component: _DateInput["default"]
   },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: _OtpInput["default"]
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/FieldArray/__stories__/Default.js

@@ -97,7 +97,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u0
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/FieldArray/__stories__/WithExactLength.js

@@ -97,7 +97,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, null, "\u0
 var WithExactLength = function WithExactLength() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/Form.stories.d.ts

@@ -2,5 +2,3 @@ declare namespace _default {
     const title: string;
 }
 export default _default;
-export * from "@digigov/form/__stories__/IntField";
-export * from "@digigov/form/__stories__/AutoCompleteField";

package/Form.stories.js

@@ -3,36 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 exports["default"] = void 0;
-
-var _IntField = require("@digigov/form/__stories__/IntField");
-
-Object.keys(_IntField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _IntField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _IntField[key];
-    }
-  });
-});
-
-var _AutoCompleteField = require("@digigov/form/__stories__/AutoCompleteField");
-
-Object.keys(_AutoCompleteField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _AutoCompleteField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _AutoCompleteField[key];
-    }
-  });
-});
 var _default = {
   title: 'Digigov Form'
 };

package/FormBuilder/__stories__/Default.js

@@ -30,7 +30,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     },
     initial: initialValues

package/MultiplicityField/__stories__/Default.js

@@ -104,7 +104,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/MultiplicityField/__stories__/WithExactLength.js

@@ -99,7 +99,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var WithExactLength = function WithExactLength() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/MultiplicityField/__stories__/WithMaxLength.js

@@ -102,7 +102,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var WithMaxLength = function WithMaxLength() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/MultiplicityField/__stories__/WithMinAndMaxLength.js

@@ -103,7 +103,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var WithMinAndMaxLength = function WithMinAndMaxLength() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/MultiplicityField/__stories__/WithMinLength.js

@@ -102,7 +102,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
 var WithMinLength = function WithMinLength() {
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/_react["default"].createElement(_form.Field, (0, _extends2["default"])({

package/es/Field/utils.js

@@ -6,6 +6,7 @@ import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
+import OtpInput from '@digigov/form/inputs/OtpInput';
 import { FormContext } from '@digigov/form/FormContext';
 var AutoComplete = /*#__PURE__*/lazy(function () {
   return import('@digigov/form/inputs/AutoComplete');
@@ -26,6 +27,11 @@ var FIELD_COMPONENTS = {
     controlled: true,
     component: DateInput
   },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: OtpInput
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/es/FieldArray/__stories__/Default.js

@@ -78,7 +78,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u0
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/FieldArray/__stories__/WithExactLength.js

@@ -78,7 +78,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u0
 export var WithExactLength = function WithExactLength() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/Form.stories.js

@@ -1,5 +1,3 @@
 export default {
   title: 'Digigov Form'
-};
-export * from '@digigov/form/__stories__/IntField';
-export * from '@digigov/form/__stories__/AutoCompleteField';
+};

package/es/FormBuilder/__stories__/Default.js

@@ -12,7 +12,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     },
     initial: initialValues

package/es/MultiplicityField/__stories__/Default.js

@@ -85,7 +85,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/MultiplicityField/__stories__/WithExactLength.js

@@ -80,7 +80,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var WithExactLength = function WithExactLength() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/MultiplicityField/__stories__/WithMaxLength.js

@@ -83,7 +83,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var WithMaxLength = function WithMaxLength() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/MultiplicityField/__stories__/WithMinAndMaxLength.js

@@ -84,7 +84,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var WithMinAndMaxLength = function WithMinAndMaxLength() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/MultiplicityField/__stories__/WithMinLength.js

@@ -83,7 +83,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var WithMinLength = function WithMinLength() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, _extends({

package/es/inputs/AutoComplete/AutoComplete.stories.js

@@ -0,0 +1,7 @@
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
+export default {
+  title: 'Digigov Form/inputs/AutoComplete',
+  component: AutoComplete,
+  displayName: 'AutoComplete'
+};
+export * from '@digigov/form/inputs/AutoComplete/__stories__/Default';

package/{esm/__stories__/AutoCompleteField.js → es/inputs/AutoComplete/__stories__/Default.js}

@@ -31,7 +31,7 @@ var _ref2 = /*#__PURE__*/React.createElement(Button, {
   type: "submit"
 }, "Submit");
 
-export var AutoCompleteField = function AutoCompleteField() {
+export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: _ref
   }, /*#__PURE__*/React.createElement(FormBuilder, {

package/es/inputs/Checkboxes/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/DateInput/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/DateInput/index.js

@@ -12,7 +12,8 @@ dayjs.extend(customParseFormat);
 
 function useDate(value, onChange) {
   var _useMemo = useMemo(function () {
-    if (!value || value.length === '') {
+    if (!value || value.length === 0) {
+      onChange('');
       return ['', '', ''];
     }
 

package/es/inputs/FileInput/__stories__/Default.js

@@ -7,7 +7,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u0
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/AFM.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var AFM = function AFM() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/Boolean.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Boolean = function Boolean() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/IBAN.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var IBAN = function IBAN() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/Integer.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Integer = function Integer() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {
@@ -21,6 +20,14 @@ export var Integer = function Integer() {
       secondary: 'Εισάγετε έναν οποιοδήποτε αριθμό μεγαλύτερο από το μηδέν'
     },
     required: true
+  }), /*#__PURE__*/React.createElement(Field, {
+    key: "random-number-not-req",
+    name: "random-number-not-req",
+    type: "int",
+    label: {
+      primary: 'Δεύτερος τυχαίος αριθμός',
+      secondary: 'Προαιρετικό πεδίο'
+    }
   }), _ref);
 };
 export default Integer;

package/es/inputs/Input/__stories__/MobilePhone.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var MobilePhone = function MobilePhone() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/PhoneNumber.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var PhoneNumber = function PhoneNumber() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Input/__stories__/PostalCode.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var PostalCode = function PostalCode() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Label/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Label, {

package/es/inputs/OtpInput/OtpInput.stories.js

@@ -0,0 +1,7 @@
+import OtpInput from '@digigov/form/inputs/OtpInput';
+export default {
+  title: 'Digigov Form/inputs/OtpInput',
+  component: OtpInput,
+  displayName: 'OtpInput'
+};
+export * from '@digigov/form/inputs/OtpInput/__stories__/Default';

package/es/inputs/OtpInput/__stories__/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var FIELDS = [{
+  key: 'otp',
+  type: 'otp',
+  maxLength: 6,
+  required: true,
+  label: {
+    primary: 'Κωδικός Επιβεβαίωσης'
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: FIELDS,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), _ref);
+};
+export default Default;

package/es/inputs/OtpInput/index.js

@@ -0,0 +1,167 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["name", "maxLength"];
+import React, { useState, useCallback } from 'react';
+import SingleCharacterInputContainer, { SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+export var RE_DIGIT = new RegExp(/^\d+$/);
+export var REMOVE_SPACES = new RegExp(/\s+/g);
+
+function useOtp(onChange, maxLength) {
+  var _useState = useState(Array(maxLength).fill('')),
+      _useState2 = _slicedToArray(_useState, 2),
+      otpValues = _useState2[0],
+      setOTPValues = _useState2[1];
+
+  var handleOtpChange = useCallback(function (otp) {
+    var otpValue = otp.join('');
+    onChange(otpValue);
+  }, [onChange]);
+
+  var itemsArray = function itemsArray(item, idx) {
+    var updatedOTPValues = _toConsumableArray(otpValues);
+
+    if (item.length === 1 || item.length === 0) {
+      updatedOTPValues[idx] = item[0] || '';
+      setOTPValues(updatedOTPValues);
+      handleOtpChange(updatedOTPValues);
+    } else if (item.length === maxLength) {
+      var valueArray = item.split('');
+      var items = [];
+
+      for (var i = 0; i < maxLength; i++) {
+        var _char = valueArray[i];
+        items.push(_char);
+        setOTPValues(items);
+        handleOtpChange(items);
+      }
+    }
+  };
+
+  var SelectionRange = useCallback(function (target) {
+    return target.setSelectionRange(0, target.value.length);
+  }, []);
+  var focusToNextInput = useCallback(function (target) {
+    var nextElement = target.nextElementSibling;
+
+    if (nextElement) {
+      nextElement.focus();
+    }
+  }, []);
+  var focusToPrevInput = useCallback(function (target) {
+    var previousElement = target.previousElementSibling;
+
+    if (previousElement) {
+      previousElement.focus();
+    }
+  }, []);
+  var inputOnKeyDown = useCallback(function (e, idx) {
+    var key = e.key;
+    var target = e.target;
+    var targetValue = target.value;
+    SelectionRange(target);
+
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+      e.preventDefault();
+      return focusToNextInput(target);
+    }
+
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+      e.preventDefault();
+      return focusToPrevInput(target);
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      if (targetValue !== '') {
+        targetValue = '';
+      } else {
+        focusToPrevInput(target);
+      }
+
+      itemsArray(targetValue, idx);
+      return e.preventDefault();
+    }
+  }, [itemsArray, focusToPrevInput, focusToNextInput]);
+  var inputOnFocus = useCallback(function (e) {
+    var target = e.target;
+    SelectionRange(target);
+  }, [SelectionRange]);
+  var inputOnChange = useCallback(function (e, idx) {
+    var target = e.target;
+    var targetValue = target.value;
+    var isTargetValueDigit = RE_DIGIT.test(targetValue);
+
+    if (!isTargetValueDigit && e.target.value !== '') {
+      return;
+    }
+
+    targetValue = isTargetValueDigit ? targetValue : '';
+    itemsArray(targetValue, idx);
+
+    if (target.value.length > 1) {
+      target.blur();
+    }
+
+    if (!isTargetValueDigit) {
+      return;
+    }
+
+    focusToNextInput(target);
+  }, [handleOtpChange, itemsArray, inputOnKeyDown, inputOnFocus]);
+  var handleOnPaste = useCallback(function (e) {
+    e.preventDefault();
+    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+
+    if (pastedData) {
+      itemsArray(pastedData, 0);
+    }
+  }, []);
+  return {
+    otpValues: otpValues,
+    inputOnChange: inputOnChange,
+    inputOnKeyDown: inputOnKeyDown,
+    inputOnFocus: inputOnFocus,
+    handleOnPaste: handleOnPaste
+  };
+}
+
+var SingleCharacterInputItemPart = function SingleCharacterInputItemPart(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement(SingleCharacterInputItem, props);
+};
+
+export var OtpInput = function OtpInput(_ref2) {
+  var name = _ref2.name,
+      _ref2$maxLength = _ref2.maxLength,
+      maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var otp = useOtp(props.onChange, maxLength);
+  return /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, otp.otpValues.map(function (digit, idx) {
+    return /*#__PURE__*/React.createElement(SingleCharacterInputItemPart, {
+      name: "".concat(name, "-").concat(idx),
+      type: "text",
+      key: idx,
+      autoComplete: "one-time-code",
+      pattern: "\\d{1}",
+      maxLength: maxLength,
+      value: digit,
+      disabled: props.disabled,
+      "aria-required": props['aria-required'],
+      onChange: function onChange(e) {
+        return otp.inputOnChange(e, idx);
+      },
+      onInput: function onInput(e) {
+        return otp.inputOnChange(e, idx);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return otp.inputOnKeyDown(e, idx);
+      },
+      onFocus: otp.inputOnFocus,
+      onPaste: otp.handleOnPaste
+    });
+  }));
+};
+export default OtpInput;

package/es/inputs/Radio/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {

package/es/inputs/Select/__stories__/Default.js

@@ -9,7 +9,6 @@ var _ref = /*#__PURE__*/React.createElement(Button, {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(FormBuilder, {
     onSubmit: function onSubmit(data) {
-      debugger;
       console.log(data);
     }
   }, /*#__PURE__*/React.createElement(Field, {