@digigov/form 0.12.5 → 0.13.0

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Change Log - @digigov/form
 
-This log was last generated on Tue, 13 Jun 2023 09:12:26 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Jul 2023 12:53:54 GMT and should not be manually modified.
+
+## 0.13.0
+Thu, 20 Jul 2023 12:53:54 GMT
+
+### Minor changes
+
+- Add limit logic to text, add validation rules
+
+### Patches
+
+- Add conditional nested fields in checkboxes and radios using the mechanism
+- Update registry
+- Add stories with divider at Checkbox and Radio.
+
+## 0.12.5
+Mon, 26 Jun 2023 12:04:49 GMT
+
+_Version update only_
 
 ## 0.12.2
 Tue, 13 Jun 2023 09:12:26 GMT

package/Field/FieldConditional.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.FieldConditional = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -25,7 +27,7 @@ var ChildFieldMemo = /*#__PURE__*/_react["default"].memo(function ChildField(_re
       register = _ref.register,
       error = _ref.error;
   var newField = (0, _utils.evaluateFieldWithConditions)(field, dependencies);
-  return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends2["default"])({}, newField, {
+  return /*#__PURE__*/_react["default"].createElement(_FieldBase.FieldBase, (0, _extends3["default"])({}, newField, {
     name: newField.key,
     reset: reset,
     control: control,
@@ -57,10 +59,13 @@ var FieldConditional = function FieldConditional(_ref2) {
       reset = _ref2.reset,
       error = _ref2.error;
   var dependencyKeys = Object.keys(field.condition);
-  var variables = (0, _reactHookForm.useWatch)({
+  var dependencyValues = (0, _reactHookForm.useWatch)({
     name: dependencyKeys,
     control: control
   });
+  var variables = dependencyKeys.reduce(function (data, fieldKey, index) {
+    return (0, _extends3["default"])({}, data, (0, _defineProperty2["default"])({}, fieldKey, dependencyValues[index]));
+  }, {});
   return /*#__PURE__*/_react["default"].createElement(ChildFieldMemo, {
     dependencies: variables,
     field: field,

package/Field/utils.js

@@ -171,11 +171,15 @@ function evaluateFieldWithConditions(field, variables) {
 
   if (variables) {
     for (var key in variables) {
-      if (field.condition[key] && field.condition[key].is === variables[key]) {
-        var then = field.condition[key].then || {};
+      if (field.condition[key] && field.condition[key].is) {
+        var is = field.condition[key].is;
 
-        for (var attr in then) {
-          newField[attr] = then[attr];
+        if (is === variables[key] || Array.isArray(variables[key]) && variables[key].includes(is)) {
+          var then = field.condition[key].then || {};
+
+          for (var attr in then) {
+            newField[attr] = then[attr];
+          }
         }
       } else if (field.condition[key]) {
         var otherwise = field.condition[key]["else"] || {};

package/es/Field/FieldConditional.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useWatch } from 'react-hook-form';
@@ -42,10 +43,13 @@ export var FieldConditional = function FieldConditional(_ref2) {
       reset = _ref2.reset,
       error = _ref2.error;
   var dependencyKeys = Object.keys(field.condition);
-  var variables = useWatch({
+  var dependencyValues = useWatch({
     name: dependencyKeys,
     control: control
   });
+  var variables = dependencyKeys.reduce(function (data, fieldKey, index) {
+    return _extends({}, data, _defineProperty({}, fieldKey, dependencyValues[index]));
+  }, {});
   return /*#__PURE__*/React.createElement(ChildFieldMemo, {
     dependencies: variables,
     field: field,

package/es/Field/utils.js

@@ -138,11 +138,15 @@ export function evaluateFieldWithConditions(field, variables) {
 
   if (variables) {
     for (var key in variables) {
-      if (field.condition[key] && field.condition[key].is === variables[key]) {
-        var then = field.condition[key].then || {};
+      if (field.condition[key] && field.condition[key].is) {
+        var is = field.condition[key].is;
 
-        for (var attr in then) {
-          newField[attr] = then[attr];
+        if (is === variables[key] || Array.isArray(variables[key]) && variables[key].includes(is)) {
+          var then = field.condition[key].then || {};
+
+          for (var attr in then) {
+            newField[attr] = then[attr];
+          }
         }
       } else if (field.condition[key]) {
         var otherwise = field.condition[key]["else"] || {};

package/es/inputs/Checkboxes/Checkboxes.stories.js

@@ -4,4 +4,6 @@ export default {
   component: Checkboxes,
   displayName: 'Checkboxes'
 };
-export * from '@digigov/form/inputs/Checkboxes/__stories__/Default';
+export * from '@digigov/form/inputs/Checkboxes/__stories__/Default';
+export * from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
+export * from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';

package/es/inputs/Checkboxes/Checkboxes.stories.playwright.json

@@ -64,6 +64,22 @@
           "title": "Focus and check using keyboard, click box and submit"
         }
       ]
+    },
+    "digigov-form-inputs-checkboxes--conditional": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input"
+              }
+            }
+          ],
+          "id": "zpUjNzrqwtmW",
+          "title": "Checkboxes conditional action"
+        }
+      ]
     }
   }
 }

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var fields = [{
+  key: 'landline',
+  type: 'phone_number',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'mobile_phone',
+  type: 'mobile_phone',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'email',
+  type: 'email',
+  label: {
+    secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_email',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'auth_form',
+  type: 'choice:multiple',
+  required: true,
+  label: {
+    primary: 'Επιλέξτε μέθοδο πιστοποίησης',
+    secondary: 'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.'
+  },
+  extra: {
+    options: [{
+      key: 'via_mobile_phone',
+      label: {
+        primary: 'Mέσω κινητού τηλεφώνου'
+      },
+      value: 'via_mobile_phone',
+      show: ['mobile_phone', 'landline']
+    }, {
+      key: 'via_email',
+      label: {
+        primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)'
+      },
+      value: 'via_email',
+      show: ['email']
+    }]
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  key: "auth_form",
+  name: "auth_form"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Conditional = function Conditional() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    fields: fields
+  }, _ref, _ref2);
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var WithDivider = function WithDivider() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:multiple",
+    required: true,
+    label: {
+      primary: 'Πώς αισθάνεστε αυτή τη στιγμή;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Έχω συνάχι'
+        },
+        value: 'runny-nose'
+      }, {
+        label: {
+          primary: 'Έχω πυρετό'
+        },
+        value: 'fever'
+      }, {
+        label: {
+          primary: 'Αισθάνομαι κούραση'
+        },
+        value: 'fatigue',
+        divider: 'ή'
+      }]
+    }
+  }), _ref);
+};
+export default WithDivider;

package/es/inputs/Checkboxes/index.js

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "onChange", "value", "extra", "disabled"];
-import React from 'react';
+var _excluded = ["name", "onChange", "value", "extra", "disabled"],
+    _excluded2 = ["label", "value", "show", "disabled", "selected"];
+import React, { useState } from 'react';
 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';
+import { Field } from '@digigov/form';
+import { CheckboxConditional } from '@digigov/react-core';
 export var Checkboxes = function Checkboxes(_ref) {
   var name = _ref.name,
       onChange = _ref.onChange,
@@ -18,7 +22,7 @@ export var Checkboxes = function Checkboxes(_ref) {
 
   if (!value) value = [];
 
-  var handleChange = function handleChange(optionValue) {
+  var handleChange = function handleChange(optionValue, idx, show) {
     return function (evt) {
       var newValue;
 
@@ -32,6 +36,14 @@ export var Checkboxes = function Checkboxes(_ref) {
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
+      }
+
+      if (show && show.length > 0) {
+        setChecked(function (items) {
+          return items.map(function (item, index) {
+            return index === idx ? !item : item;
+          });
+        });
       } // reset value to undefined instead of an empty array
       // so the error state mechanism can throw validation errors
 
@@ -44,17 +56,32 @@ export var Checkboxes = function Checkboxes(_ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
+  var _useState = useState(Array(options.length).fill(false)),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
   return /*#__PURE__*/React.createElement(CoreCheckboxes, {
     className: className
-  }, options.map(function (option, key) {
-    return /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+  }, options.map(function (_ref2, index) {
+    var _value;
+
+    var label = _ref2.label,
+        v = _ref2.value,
+        show = _ref2.show,
+        optionDisabled = _ref2.disabled,
+        selected = _ref2.selected,
+        option = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.createElement(CheckboxItem, _extends({
+      key: "".concat(name, ".").concat(index),
       name: name,
-      disabled: disabled,
-      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      ,
-      checked: value.includes(option.value),
-      onChange: handleChange(option.value)
+      value: v,
+      disabled: disabled || optionDisabled,
+      checked: (_value = value) === null || _value === void 0 ? void 0 : _value.includes(v),
+      onChange: handleChange(v, index, show)
     }, option, _extends({}, props, {
       reset: undefined,
       defaultValue: undefined,
@@ -62,7 +89,12 @@ export var Checkboxes = function Checkboxes(_ref) {
       required: undefined,
       'aria-describedby': undefined,
       type: 'checkbox'
-    })), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(option.label.secondary)));
+    })), label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), !!checked[index] && show && /*#__PURE__*/React.createElement(CheckboxConditional, null, show.map(function (fieldName) {
+      return /*#__PURE__*/React.createElement(Field, {
+        name: fieldName,
+        key: fieldName
+      });
+    })), selected && selected());
   }));
 };
 export default Checkboxes;

package/es/inputs/Input/Input.stories.js

@@ -11,4 +11,5 @@ export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
 export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
 export * from '@digigov/form/inputs/Input/__stories__/AFM';
 export * from '@digigov/form/inputs/Input/__stories__/IBAN';
-export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export * from '@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var TextWithCharacterLimit = function TextWithCharacterLimit() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "text",
+    name: "text",
+    type: "text",
+    label: {
+      primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;'
+    },
+    required: true,
+    extra: {
+      limit: {
+        min: 3,
+        max: 10
+      },
+      multiline: true
+    }
+  }), _ref);
+};
+export default TextWithCharacterLimit;

package/es/inputs/Input/index.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "type", "extra"];
+var _excluded = ["name", "control", "type", "extra"];
 import React from 'react';
 import TextInput from '@digigov/react-core/TextInput';
 import TextArea from '@digigov/react-core/TextArea';
+import { Hint } from '@digigov/react-core';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from '@digigov/ui/app/i18n';
 var TYPES_MAP = {
   string: 'text',
   "int": 'text',
@@ -12,14 +15,17 @@ var TYPES_MAP = {
 };
 export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
   var name = _ref.name,
+      control = _ref.control,
       type = _ref.type,
       extra = _ref.extra,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  // eslint-disable-next-line prefer-const
   var _ref2 = extra || {},
       _ref2$multiline = _ref2.multiline,
       multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
-      rows = _ref2.rows;
+      rows = _ref2.rows,
+      limit = _ref2.limit;
 
   var _ref3 = extra || {},
       className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
@@ -31,8 +37,16 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
 
   var fieldType = TYPES_MAP[type || 'text'] || 'text';
 
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var currentValue = useWatch({
+    control: control,
+    name: name
+  });
+
   if (multiline === true) {
-    return /*#__PURE__*/React.createElement(TextArea, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({
       name: name,
       className: className,
       rows: rows,
@@ -41,7 +55,11 @@ export var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref
       reset: undefined,
       required: undefined,
       type: fieldType
-    })));
+    }))), (limit === null || limit === void 0 ? void 0 : limit.max) && /*#__PURE__*/React.createElement(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.createElement("span", null, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.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.createElement("span", {
+      style: {
+        color: '#b60202'
+      }
+    }, t('form.info.text.you_have'), ' ', /*#__PURE__*/React.createElement("b", null, currentValue && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max)), ' ', (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) - (limit === null || limit === void 0 ? void 0 : limit.max) === 1 ? "".concat(t('form.info.text.character')) : "".concat(t('form.info.text.characters')), ' ', t('form.info.text.too_many'), ".")));
   } else {
     return /*#__PURE__*/React.createElement(TextInput, _extends({
       name: name,

package/es/inputs/Radio/Radio.stories.js

@@ -4,4 +4,6 @@ export default {
   component: Radio,
   displayName: 'Radio'
 };
-export * from '@digigov/form/inputs/Radio/__stories__/Default';
+export * from '@digigov/form/inputs/Radio/__stories__/Default';
+export * from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+export * from '@digigov/form/inputs/Radio/__stories__/Conditional';

package/es/inputs/Radio/Radio.stories.playwright.json

@@ -52,6 +52,22 @@
           "title": "select option with keyboard and submit"
         }
       ]
+    },
+    "digigov-form-inputs-radio--conditional": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>div>label>input"
+              }
+            }
+          ],
+          "id": "LAUEuHh58XiI",
+          "title": "Radio conditional action"
+        }
+      ]
     }
   }
 }

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+var fields = [{
+  key: 'landline',
+  type: 'phone_number',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'mobile_phone',
+  type: 'mobile_phone',
+  label: {
+    secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_mobile_phone',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'email',
+  type: 'email',
+  label: {
+    secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.'
+  },
+  enabled: false,
+  condition: {
+    auth_form: {
+      is: 'via_email',
+      then: {
+        enabled: true,
+        required: true
+      }
+    }
+  }
+}, {
+  key: 'auth_form',
+  type: 'choice:single',
+  required: true,
+  label: {
+    primary: 'Επιλέξτε μέθοδο πιστοποίησης',
+    secondary: 'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.'
+  },
+  extra: {
+    options: [{
+      key: 'via_mobile_phone',
+      label: {
+        primary: 'Mέσω κινητού τηλεφώνου'
+      },
+      value: 'via_mobile_phone',
+      show: ['mobile_phone', 'landline']
+    }, {
+      key: 'via_email',
+      label: {
+        primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)'
+      },
+      value: 'via_email',
+      show: ['email']
+    }]
+  }
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Field, {
+  key: "auth_form",
+  name: "auth_form"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Conditional = function Conditional() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    fields: fields
+  }, _ref, _ref2);
+};

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var WithDivider = function WithDivider() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa',
+        divider: 'ή'
+      }]
+    }
+  }), _ref);
+};
+export default WithDivider;