@digigov/form 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/cjs/inputs/Label/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Label = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
+
+var _LabelTitle = _interopRequireDefault(require("@digigov/react-core/cjs/LabelTitle"));
+
+var _i18n = require("@digigov/ui/cjs/i18n");
+
+var Label = function Label(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      value = _ref.value;
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  if ((!label || label && !label.primary && !label.secondary) && !value) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LabelTitle["default"], {
+    className: className,
+    size: "sm"
+  }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary)));
+};
+
+exports.Label = Label;
+Label.defaultProps = {
+  label: {}
+};
+var _default = Label;
+exports["default"] = _default;

package/{inputs/OtpInput/OtpInput.stories.js → cjs/inputs/OtpInput/OtpInput.stories/index.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/form/inputs/OtpInput/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -25,7 +25,7 @@ Object.keys(_Default).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov Form/inputs/OtpInput',
-  component: _OtpInput["default"],
+  component: _["default"],
   displayName: 'OtpInput'
 };
 exports["default"] = _default;

package/{inputs/OtpInput/__stories__/Default.js → cjs/inputs/OtpInput/__stories__/Default/index.js}

@@ -11,9 +11,9 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -34,13 +34,13 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     fields: FIELDS,
     onSubmit: function onSubmit(data) {
       console.log(data);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form.Fieldset, null, FIELDS.map(function (field) {
-    return /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, /*#__PURE__*/_react["default"].createElement(_.Fieldset, null, FIELDS.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_.Field, {
       key: field.key,
       name: field.key
     });

package/cjs/inputs/OtpInput/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RE_DIGIT = exports.REMOVE_SPACES = exports.OtpInput = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _SingleCharacterInputs = _interopRequireWildcard(require("@digigov/ui/cjs/form/SingleCharacterInputs"));
+
+var _excluded = ["name", "maxLength"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RE_DIGIT = new RegExp(/^\d+$/);
+exports.RE_DIGIT = RE_DIGIT;
+var REMOVE_SPACES = new RegExp(/\s+/g);
+exports.REMOVE_SPACES = REMOVE_SPACES;
+
+function useOtp(onChange, maxLength) {
+  var _useState = (0, _react.useState)(Array(maxLength).fill('')),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      otpValues = _useState2[0],
+      setOtpValues = _useState2[1];
+
+  var handleChange = (0, _react.useCallback)(function (otp) {
+    setOtpValues(otp);
+    var otpValue = otp.join('');
+    onChange(otpValue);
+  }, [onChange]);
+
+  var setOtp = function setOtp(item, idx) {
+    var updatedOTPValues = (0, _toConsumableArray2["default"])(otpValues);
+
+    if (item.length === 1 || item.length === 0) {
+      updatedOTPValues[idx] = item[0] || '';
+      handleChange(updatedOTPValues);
+    } else if (item.length === maxLength) {
+      var valueArray = item.split('').slice(0, maxLength);
+      handleChange(valueArray);
+    }
+  };
+
+  var setSelectionRange = (0, _react.useCallback)(function (target) {
+    return target.setSelectionRange(0, target.value.length);
+  }, []);
+  var focusToNextInput = (0, _react.useCallback)(function (target) {
+    var nextElement = target.nextElementSibling;
+
+    if (nextElement) {
+      nextElement.focus();
+    }
+  }, []);
+  var focusToPrevInput = (0, _react.useCallback)(function (target) {
+    var previousElement = target.previousElementSibling;
+
+    if (previousElement) {
+      previousElement.focus();
+    }
+  }, []);
+  var handleKeyDown = (0, _react.useCallback)(function (e, idx) {
+    var key = e.key;
+    var target = e.target;
+    var targetValue = target.value;
+    setSelectionRange(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);
+      }
+
+      setOtp(targetValue, idx);
+      return e.preventDefault();
+    }
+  }, [setOtp, focusToPrevInput, focusToNextInput]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    var target = e.target;
+    setSelectionRange(target);
+  }, [setSelectionRange]);
+  var handleOtpChange = (0, _react.useCallback)(function (e, idx) {
+    var target = e.target;
+    var targetValue = target.value;
+    var isTargetValueDigit = RE_DIGIT.test(targetValue); // We want to pass the empty string when the value is deleted
+    // emptry string replaces the deleted value
+
+    if (isTargetValueDigit || targetValue === '') {
+      setOtp(targetValue, idx);
+
+      if (target.value.length > 1) {
+        target.blur();
+      }
+
+      focusToNextInput(target);
+    }
+  }, [setOtp, handleKeyDown, handleFocus]);
+  var handlePaste = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+
+    if (pastedData) {
+      setOtp(pastedData, 0);
+    }
+  }, []);
+  return {
+    otpValues: otpValues,
+    handleOtpChange: handleOtpChange,
+    handleKeyDown: handleKeyDown,
+    handleFocus: handleFocus,
+    handlePaste: handlePaste
+  };
+}
+
+var SingleCharacterInputPart = function SingleCharacterInputPart(_ref) {
+  var props = (0, _extends2["default"])({}, _ref);
+  return /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, props);
+};
+
+var OtpInput = function OtpInput(_ref2) {
+  var name = _ref2.name,
+      _ref2$maxLength = _ref2.maxLength,
+      maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var otp = useOtp(props.onChange, maxLength);
+  return /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs["default"], null, otp.otpValues.map(function (digit, idx) {
+    return /*#__PURE__*/_react["default"].createElement(SingleCharacterInputPart, {
+      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.handleOtpChange(e, idx);
+      },
+      onInput: function onInput(e) {
+        if (e.target.value === digit) {
+          otp.handleOtpChange(e, idx);
+        }
+      },
+      onKeyDown: function onKeyDown(e) {
+        return otp.handleKeyDown(e, idx);
+      },
+      onFocus: otp.handleFocus,
+      onPaste: otp.handlePaste,
+      error: !digit ? props.error : false
+    });
+  }));
+};
+
+exports.OtpInput = OtpInput;
+var _default = OtpInput;
+exports["default"] = _default;

package/{inputs/Radio/Radio.stories.js → cjs/inputs/Radio/Radio.stories/index.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/form/inputs/Radio/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,7 +24,7 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _WithDivider = require("@digigov/form/inputs/Radio/__stories__/WithDivider");
+var _WithDivider = require("./__stories__/WithDivider");
 
 Object.keys(_WithDivider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -38,7 +38,7 @@ Object.keys(_WithDivider).forEach(function (key) {
   });
 });
 
-var _Conditional = require("@digigov/form/inputs/Radio/__stories__/Conditional");
+var _Conditional = require("./__stories__/Conditional");
 
 Object.keys(_Conditional).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -53,7 +53,7 @@ Object.keys(_Conditional).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov Form/inputs/Radio',
-  component: _Radio["default"],
+  component: _["default"],
   displayName: 'Radio'
 };
 exports["default"] = _default;

package/{inputs/Radio/__stories__/Conditional.js → cjs/inputs/Radio/__stories__/Conditional/index.js}

@@ -11,9 +11,9 @@ exports.Conditional = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -94,7 +94,7 @@ var fields = [{
   }
 }];
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_form.Field, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_.Field, {
   key: "auth_form",
   name: "auth_form"
 });
@@ -104,7 +104,7 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var Conditional = function Conditional() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     onSubmit: function onSubmit(data) {
       console.log(data);
     },

package/{inputs/Radio/__stories__/Default.js → cjs/inputs/Radio/__stories__/Default/index.js}

@@ -11,9 +11,9 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -24,17 +24,17 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     onSubmit: function onSubmit(data) {
       console.log(data);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, {
     key: 'string',
     name: "string",
     type: "choice:single",
     required: true,
     label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+      primary: 'Ποιά είναι η χώρα της διαμονής σας;'
     },
     extra: {
       options: [{

package/{inputs/Radio/__stories__/WithDivider.js → cjs/inputs/Radio/__stories__/WithDivider/index.js}

@@ -11,9 +11,9 @@ exports["default"] = exports.WithDivider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -24,17 +24,17 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var WithDivider = function WithDivider() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     onSubmit: function onSubmit(data) {
       console.log(data);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, {
     key: 'string',
     name: "string",
     type: "choice:single",
     required: true,
     label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+      primary: 'Ποιά είναι η χώρα της διαμονής σας;'
     },
     extra: {
       options: [{

package/cjs/inputs/Radio/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RadioButtonsGroup = void 0;
+
+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 _ = require("../..");
+
+var _reactCore = require("@digigov/react-core");
+
+var _Hint = _interopRequireDefault(require("@digigov/react-core/cjs/Hint"));
+
+var _RadioContainer = _interopRequireDefault(require("@digigov/react-core/cjs/RadioContainer"));
+
+var _RadioItem = _interopRequireDefault(require("@digigov/react-core/cjs/RadioItem"));
+
+var _i18n = require("@digigov/ui/cjs/i18n");
+
+var _excluded = ["name", "control", "register", "extra", "disabled"],
+    _excluded2 = ["label", "value", "show", "disabled", "selected"];
+
+var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
+  var name = _ref.name,
+      control = _ref.control,
+      register = _ref.register,
+      _ref$extra = _ref.extra,
+      options = _ref$extra.options,
+      className = _ref$extra.className,
+      disabled = _ref.disabled,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var currentValue = (0, _reactHookForm.useWatch)({
+    control: control,
+    name: name
+  });
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/_react["default"].createElement(_RadioContainer["default"], {
+    className: className,
+    defaultValue: currentValue,
+    id: name
+  }, options.map(function (_ref2) {
+    var label = _ref2.label,
+        v = _ref2.value,
+        show = _ref2.show,
+        optionDisabled = _ref2.disabled,
+        selected = _ref2.selected,
+        option = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: "".concat(name, ".").concat(v)
+    }, /*#__PURE__*/_react["default"].createElement(_RadioItem["default"], (0, _extends2["default"])({}, register(name), {
+      value: v,
+      disabled: disabled || optionDisabled
+    }, option, (0, _extends2["default"])({}, props, {
+      reset: undefined,
+      required: undefined,
+      'aria-describedby': undefined,
+      type: 'radio'
+    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/_react["default"].createElement(_reactCore.RadioConditional, null, show.map(function (fieldName) {
+      return /*#__PURE__*/_react["default"].createElement(_.Field, {
+        name: fieldName,
+        key: fieldName
+      });
+    })));
+  }));
+};
+
+exports.RadioButtonsGroup = RadioButtonsGroup;
+var _default = RadioButtonsGroup;
+exports["default"] = _default;

package/{inputs/Select/Select.stories.js → cjs/inputs/Select/Select.stories/index.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
+var _ = _interopRequireDefault(require("./"));
 
-var _Default = require("@digigov/form/inputs/Select/__stories__/Default");
+var _Default = require("./__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -25,7 +25,7 @@ Object.keys(_Default).forEach(function (key) {
 });
 var _default = {
   title: 'Digigov Form/inputs/Select',
-  component: _Select["default"],
+  component: _["default"],
   displayName: 'Select'
 };
 exports["default"] = _default;

package/{inputs/Select/__stories__/Default.js → cjs/inputs/Select/__stories__/Default/index.js}

@@ -11,9 +11,9 @@ exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _ = _interopRequireWildcard(require("../../.."));
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("@digigov/ui/cjs/form/Button");
 
 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); }
 
@@ -24,17 +24,17 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 var Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
     onSubmit: function onSubmit(data) {
       console.log(data);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, /*#__PURE__*/_react["default"].createElement(_.Field, {
     key: 'string',
     name: "string",
     type: "choice:single",
     required: true,
     label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+      primary: 'Ποιά είναι η χώρα της διαμονής σας;'
     },
     extra: {
       component: 'Select',

package/cjs/inputs/Select/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Select = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SelectContainer = _interopRequireDefault(require("@digigov/react-core/cjs/SelectContainer"));
+
+var _SelectOption = _interopRequireDefault(require("@digigov/react-core/cjs/SelectOption"));
+
+var _excluded = ["name", "extra", "disabled"];
+
+var Select = /*#__PURE__*/_react["default"].forwardRef(function WrappedSelect(_ref, ref) {
+  var name = _ref.name,
+      _ref$extra = _ref.extra,
+      options = _ref$extra.options,
+      className = _ref$extra.className,
+      disabled = _ref.disabled,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_SelectContainer["default"], (0, _extends2["default"])({
+    className: className,
+    ref: ref,
+    name: name,
+    disabled: disabled
+  }, (0, _extends2["default"])({}, props, {
+    reset: undefined,
+    required: undefined
+  })), options.map(function (_ref2) {
+    var value = _ref2.value,
+        label = _ref2.label;
+    return /*#__PURE__*/_react["default"].createElement(_SelectOption["default"], {
+      key: value,
+      value: value
+    }, label && label.primary ? label.primary : value);
+  }));
+});
+
+exports.Select = Select;
+var _default = Select;
+exports["default"] = _default;