@digigov/form 1.0.0-6b93ebf2 → 1.0.0-871b6be5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/FormBuilder/FormBuilder.mdx +6 -8
  2. package/MultiplicityField/__stories__/PreviewDisplay.js +1 -1
  3. package/Questions/Step/StepArrayReview.js +2 -2
  4. package/Questions/Step/StepTitle.d.ts +2 -2
  5. package/Questions/Step/StepTitle.js +8 -4
  6. package/Questions/__snapshots__/index.spec.tsx.snap +69 -356
  7. package/Questions/__stories__/Default.js +1 -1
  8. package/Questions/index.mdx +4 -4
  9. package/es/FormBuilder/FormBuilder.mdx +6 -8
  10. package/es/MultiplicityField/__stories__/PreviewDisplay.js +1 -1
  11. package/es/Questions/Step/StepArrayReview.js +2 -2
  12. package/es/Questions/Step/StepTitle.js +7 -4
  13. package/es/Questions/__snapshots__/index.spec.tsx.snap +69 -356
  14. package/es/Questions/__stories__/Default.js +1 -1
  15. package/es/Questions/index.mdx +4 -4
  16. package/es/inputs/DateInput/__stories__/Default.js +0 -18
  17. package/es/inputs/FileInput/index.js +1 -1
  18. package/es/inputs/OtpInput/index.js +5 -5
  19. package/es/inputs/Radio/__stories__/Default.js +1 -1
  20. package/es/inputs/Radio/__stories__/WithDivider.js +1 -1
  21. package/es/inputs/Select/__stories__/Default.js +1 -1
  22. package/esm/FormBuilder/FormBuilder.mdx +6 -8
  23. package/esm/MultiplicityField/__stories__/PreviewDisplay.js +1 -1
  24. package/esm/Questions/Step/StepArrayReview.js +2 -2
  25. package/esm/Questions/Step/StepTitle.js +7 -4
  26. package/esm/Questions/__snapshots__/index.spec.tsx.snap +69 -356
  27. package/esm/Questions/__stories__/Default.js +1 -1
  28. package/esm/Questions/index.mdx +4 -4
  29. package/esm/index.js +1 -1
  30. package/esm/inputs/DateInput/__stories__/Default.js +0 -18
  31. package/esm/inputs/FileInput/index.js +1 -1
  32. package/esm/inputs/OtpInput/index.js +5 -5
  33. package/esm/inputs/Radio/__stories__/Default.js +1 -1
  34. package/esm/inputs/Radio/__stories__/WithDivider.js +1 -1
  35. package/esm/inputs/Select/__stories__/Default.js +1 -1
  36. package/inputs/DateInput/__stories__/Default.js +0 -18
  37. package/inputs/FileInput/index.js +1 -1
  38. package/inputs/OtpInput/index.js +5 -5
  39. package/inputs/Radio/__stories__/Default.js +1 -1
  40. package/inputs/Radio/__stories__/WithDivider.js +1 -1
  41. package/inputs/Select/__stories__/Default.js +1 -1
  42. package/package.json +4 -4
  43. package/src/FormBuilder/FormBuilder.mdx +6 -8
  44. package/src/MultiplicityField/__stories__/PreviewDisplay.tsx +4 -4
  45. package/src/Questions/Step/StepArrayReview.tsx +3 -3
  46. package/src/Questions/Step/StepTitle.tsx +12 -14
  47. package/src/Questions/__snapshots__/index.spec.tsx.snap +69 -356
  48. package/src/Questions/__stories__/Default.tsx +4 -4
  49. package/src/Questions/index.mdx +4 -4
  50. package/src/inputs/DateInput/__stories__/Default.tsx +0 -16
  51. package/src/inputs/FileInput/index.tsx +1 -1
  52. package/src/inputs/OtpInput/index.tsx +8 -8
  53. package/src/inputs/Radio/__stories__/Default.tsx +1 -1
  54. package/src/inputs/Radio/__stories__/WithDivider.tsx +1 -1
  55. package/src/inputs/Select/__stories__/Default.tsx +1 -1
  56. package/src/types.tsx +1 -1
  57. package/types.d.ts +1 -1
@@ -65,83 +65,87 @@ exports[`renders the Questions 1`] = `
65
65
  onClick={[Function]}
66
66
  tabIndex={0}
67
67
  >
68
- <ForwardRef(CaretIcon)>
69
- <ForwardRef(SvgIcon)
70
- className="govgr-caret--left"
68
+ <CaretIcon
69
+ direction="left"
70
+ >
71
+ <ForwardRef(Icon)
72
+ direction="left"
73
+ icon="caret"
71
74
  >
72
- <ForwardRef(Base)
73
- aria-hidden="true"
74
- as="svg"
75
- className="govgr-caret--left govgr-svg-icon"
76
- focusable="false"
77
- viewBox="0 0 24 24"
75
+ <ForwardRef(SvgIcon)
76
+ className="govgr-svg-icon--caret"
78
77
  >
79
- <svg
78
+ <ForwardRef(Base)
80
79
  aria-hidden="true"
81
- className="govgr-caret--left govgr-svg-icon"
80
+ as="svg"
81
+ className="govgr-svg-icon--caret govgr-svg-icon"
82
82
  focusable="false"
83
83
  viewBox="0 0 24 24"
84
84
  >
85
- <path
86
- d="M18,22V2L6,12L18,22z"
87
- />
88
- </svg>
89
- </ForwardRef(Base)>
90
- </ForwardRef(SvgIcon)>
91
- </ForwardRef(CaretIcon)>
92
- Πίσω
85
+ <svg
86
+ aria-hidden="true"
87
+ className="govgr-svg-icon--caret govgr-svg-icon"
88
+ focusable="false"
89
+ viewBox="0 0 24 24"
90
+ >
91
+ <caret
92
+ direction="left"
93
+ >
94
+ <path
95
+ d="M18,22V2L6,12L18,22z"
96
+ />
97
+ </caret>
98
+ </svg>
99
+ </ForwardRef(Base)>
100
+ </ForwardRef(SvgIcon)>
101
+ </ForwardRef(Icon)>
102
+ </CaretIcon>
103
+ back.button
93
104
  </a>
94
105
  </ForwardRef(Base)>
95
106
  </ForwardRef(BackLink)>
96
107
  </withDeprecationComponent>
97
- <ForwardRef(PageTitle)>
108
+ <ForwardRef(PageTitleContainer)>
98
109
  <ForwardRef(Base)
99
110
  as="div"
100
- className=""
111
+ className="govgr-page-title"
101
112
  >
102
113
  <div
103
- className=""
114
+ className="govgr-page-title"
104
115
  >
105
- <ForwardRef(PageTitle)>
106
- <ForwardRef(Base)
107
- as="div"
108
- className=""
109
- >
110
- <div
111
- className=""
116
+ <ForwardRef(PageTitleCaption)>
117
+ <ForwardRef(HeadingCaption)>
118
+ <ForwardRef(Base)
119
+ as="span"
120
+ className="govgr-caption-lg"
112
121
  >
113
- <ForwardRef(HeadingCaption)>
114
- <ForwardRef(Base)
115
- as="span"
116
- className="govgr-caption-lg"
117
- >
118
- <span
119
- className="govgr-caption-lg"
120
- >
121
- intro.caption
122
- </span>
123
- </ForwardRef(Base)>
124
- </ForwardRef(HeadingCaption)>
125
- </div>
126
- </ForwardRef(Base)>
127
- </ForwardRef(PageTitle)>
122
+ <span
123
+ className="govgr-caption-lg"
124
+ >
125
+ intro.caption
126
+ </span>
127
+ </ForwardRef(Base)>
128
+ </ForwardRef(HeadingCaption)>
129
+ </ForwardRef(PageTitleCaption)>
128
130
  <StepTitleHeading>
129
131
  <ForwardRef(PageTitleHeading)>
130
- <ForwardRef(Base)
131
- as="h1"
132
- className="govgr-heading-xl"
133
- >
134
- <h1
132
+ <ForwardRef(Heading)>
133
+ <ForwardRef(Base)
134
+ as="h1"
135
135
  className="govgr-heading-xl"
136
136
  >
137
- intro.title
138
- </h1>
139
- </ForwardRef(Base)>
137
+ <h1
138
+ className="govgr-heading-xl"
139
+ >
140
+ intro.title
141
+ </h1>
142
+ </ForwardRef(Base)>
143
+ </ForwardRef(Heading)>
140
144
  </ForwardRef(PageTitleHeading)>
141
145
  </StepTitleHeading>
142
146
  </div>
143
147
  </ForwardRef(Base)>
144
- </ForwardRef(PageTitle)>
148
+ </ForwardRef(PageTitleContainer)>
145
149
  </StepTitleBase>
146
150
  </StepTitle>
147
151
  <StepQuote>
@@ -237,7 +241,6 @@ exports[`renders the Questions 1`] = `
237
241
  "ref": <input
238
242
  aria-required="true"
239
243
  class="govgr-input"
240
- control="[object Object]"
241
244
  name="name"
242
245
  type="text"
243
246
  />,
@@ -311,7 +314,11 @@ exports[`renders the Questions 1`] = `
311
314
  },
312
315
  "watch": Object {
313
316
  "next": [Function],
314
- "observers": Array [],
317
+ "observers": Array [
318
+ Object {
319
+ "next": [Function],
320
+ },
321
+ ],
315
322
  "subscribe": [Function],
316
323
  "unsubscribe": [Function],
317
324
  },
@@ -352,17 +359,14 @@ exports[`renders the Questions 1`] = `
352
359
  <ForwardRef(Grid)
353
360
  className="govgr-field"
354
361
  item={true}
355
- lg={12}
356
- md={12}
357
- xl={12}
358
362
  xs={12}
359
363
  >
360
364
  <ForwardRef(Base)
361
365
  as="div"
362
- className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
366
+ className="govgr-field xs:govgr-grid__col-span-12"
363
367
  >
364
368
  <div
365
- className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
369
+ className="govgr-field xs:govgr-grid__col-span-12"
366
370
  >
367
371
  <ForwardRef(LabelContainer)>
368
372
  <ForwardRef(Base)
@@ -421,7 +425,6 @@ exports[`renders the Questions 1`] = `
421
425
  "ref": <input
422
426
  aria-required="true"
423
427
  class="govgr-input"
424
- control="[object Object]"
425
428
  name="name"
426
429
  type="text"
427
430
  />,
@@ -495,7 +498,11 @@ exports[`renders the Questions 1`] = `
495
498
  },
496
499
  "watch": Object {
497
500
  "next": [Function],
498
- "observers": Array [],
501
+ "observers": Array [
502
+ Object {
503
+ "next": [Function],
504
+ },
505
+ ],
499
506
  "subscribe": [Function],
500
507
  "unsubscribe": [Function],
501
508
  },
@@ -519,104 +526,6 @@ exports[`renders the Questions 1`] = `
519
526
  >
520
527
  <ForwardRef(TextInput)
521
528
  aria-required={true}
522
- control={
523
- Object {
524
- "_defaultValues": Object {},
525
- "_executeSchema": [Function],
526
- "_fields": Object {
527
- "name": Object {
528
- "_f": Object {
529
- "mount": true,
530
- "name": "name",
531
- "ref": <input
532
- aria-required="true"
533
- class="govgr-input"
534
- control="[object Object]"
535
- name="name"
536
- type="text"
537
- />,
538
- },
539
- },
540
- },
541
- "_formState": Object {
542
- "dirtyFields": Object {},
543
- "errors": Object {},
544
- "isDirty": false,
545
- "isSubmitSuccessful": false,
546
- "isSubmitted": false,
547
- "isSubmitting": false,
548
- "isValid": false,
549
- "isValidating": false,
550
- "submitCount": 0,
551
- "touchedFields": Object {},
552
- },
553
- "_formValues": Object {
554
- "name": "",
555
- },
556
- "_getDirty": [Function],
557
- "_getFieldArray": [Function],
558
- "_getWatch": [Function],
559
- "_names": Object {
560
- "array": Set {},
561
- "mount": Set {
562
- "name",
563
- },
564
- "unMount": Set {},
565
- "watch": Set {},
566
- },
567
- "_options": Object {
568
- "criteriaMode": "all",
569
- "defaultValues": Object {},
570
- "mode": "onSubmit",
571
- "reValidateMode": "onSubmit",
572
- "resolver": [Function],
573
- "shouldFocusError": true,
574
- },
575
- "_proxyFormState": Object {
576
- "dirtyFields": false,
577
- "errors": "all",
578
- "isDirty": false,
579
- "isValid": false,
580
- "isValidating": false,
581
- "touchedFields": false,
582
- },
583
- "_removeUnmounted": [Function],
584
- "_stateFlags": Object {
585
- "action": false,
586
- "mount": true,
587
- "watch": false,
588
- },
589
- "_subjects": Object {
590
- "array": Object {
591
- "next": [Function],
592
- "observers": Array [],
593
- "subscribe": [Function],
594
- "unsubscribe": [Function],
595
- },
596
- "state": Object {
597
- "next": [Function],
598
- "observers": Array [
599
- Object {
600
- "next": [Function],
601
- },
602
- ],
603
- "subscribe": [Function],
604
- "unsubscribe": [Function],
605
- },
606
- "watch": Object {
607
- "next": [Function],
608
- "observers": Array [],
609
- "subscribe": [Function],
610
- "unsubscribe": [Function],
611
- },
612
- },
613
- "_updateFieldArray": [Function],
614
- "_updateValid": [Function],
615
- "getFieldState": [Function],
616
- "register": [Function],
617
- "unregister": [Function],
618
- }
619
- }
620
529
  disabled={false}
621
530
  error={false}
622
531
  name="name"
@@ -628,104 +537,6 @@ exports[`renders the Questions 1`] = `
628
537
  aria-required={true}
629
538
  as="input"
630
539
  className="govgr-input"
631
- control={
632
- Object {
633
- "_defaultValues": Object {},
634
- "_executeSchema": [Function],
635
- "_fields": Object {
636
- "name": Object {
637
- "_f": Object {
638
- "mount": true,
639
- "name": "name",
640
- "ref": <input
641
- aria-required="true"
642
- class="govgr-input"
643
- control="[object Object]"
644
- name="name"
645
- type="text"
646
- />,
647
- },
648
- },
649
- },
650
- "_formState": Object {
651
- "dirtyFields": Object {},
652
- "errors": Object {},
653
- "isDirty": false,
654
- "isSubmitSuccessful": false,
655
- "isSubmitted": false,
656
- "isSubmitting": false,
657
- "isValid": false,
658
- "isValidating": false,
659
- "submitCount": 0,
660
- "touchedFields": Object {},
661
- },
662
- "_formValues": Object {
663
- "name": "",
664
- },
665
- "_getDirty": [Function],
666
- "_getFieldArray": [Function],
667
- "_getWatch": [Function],
668
- "_names": Object {
669
- "array": Set {},
670
- "mount": Set {
671
- "name",
672
- },
673
- "unMount": Set {},
674
- "watch": Set {},
675
- },
676
- "_options": Object {
677
- "criteriaMode": "all",
678
- "defaultValues": Object {},
679
- "mode": "onSubmit",
680
- "reValidateMode": "onSubmit",
681
- "resolver": [Function],
682
- "shouldFocusError": true,
683
- },
684
- "_proxyFormState": Object {
685
- "dirtyFields": false,
686
- "errors": "all",
687
- "isDirty": false,
688
- "isValid": false,
689
- "isValidating": false,
690
- "touchedFields": false,
691
- },
692
- "_removeUnmounted": [Function],
693
- "_stateFlags": Object {
694
- "action": false,
695
- "mount": true,
696
- "watch": false,
697
- },
698
- "_subjects": Object {
699
- "array": Object {
700
- "next": [Function],
701
- "observers": Array [],
702
- "subscribe": [Function],
703
- "unsubscribe": [Function],
704
- },
705
- "state": Object {
706
- "next": [Function],
707
- "observers": Array [
708
- Object {
709
- "next": [Function],
710
- },
711
- ],
712
- "subscribe": [Function],
713
- "unsubscribe": [Function],
714
- },
715
- "watch": Object {
716
- "next": [Function],
717
- "observers": Array [],
718
- "subscribe": [Function],
719
- "unsubscribe": [Function],
720
- },
721
- },
722
- "_updateFieldArray": [Function],
723
- "_updateValid": [Function],
724
- "getFieldState": [Function],
725
- "register": [Function],
726
- "unregister": [Function],
727
- }
728
- }
729
540
  disabled={false}
730
541
  name="name"
731
542
  onBlur={[Function]}
@@ -735,104 +546,6 @@ exports[`renders the Questions 1`] = `
735
546
  <input
736
547
  aria-required={true}
737
548
  className="govgr-input"
738
- control={
739
- Object {
740
- "_defaultValues": Object {},
741
- "_executeSchema": [Function],
742
- "_fields": Object {
743
- "name": Object {
744
- "_f": Object {
745
- "mount": true,
746
- "name": "name",
747
- "ref": <input
748
- aria-required="true"
749
- class="govgr-input"
750
- control="[object Object]"
751
- name="name"
752
- type="text"
753
- />,
754
- },
755
- },
756
- },
757
- "_formState": Object {
758
- "dirtyFields": Object {},
759
- "errors": Object {},
760
- "isDirty": false,
761
- "isSubmitSuccessful": false,
762
- "isSubmitted": false,
763
- "isSubmitting": false,
764
- "isValid": false,
765
- "isValidating": false,
766
- "submitCount": 0,
767
- "touchedFields": Object {},
768
- },
769
- "_formValues": Object {
770
- "name": "",
771
- },
772
- "_getDirty": [Function],
773
- "_getFieldArray": [Function],
774
- "_getWatch": [Function],
775
- "_names": Object {
776
- "array": Set {},
777
- "mount": Set {
778
- "name",
779
- },
780
- "unMount": Set {},
781
- "watch": Set {},
782
- },
783
- "_options": Object {
784
- "criteriaMode": "all",
785
- "defaultValues": Object {},
786
- "mode": "onSubmit",
787
- "reValidateMode": "onSubmit",
788
- "resolver": [Function],
789
- "shouldFocusError": true,
790
- },
791
- "_proxyFormState": Object {
792
- "dirtyFields": false,
793
- "errors": "all",
794
- "isDirty": false,
795
- "isValid": false,
796
- "isValidating": false,
797
- "touchedFields": false,
798
- },
799
- "_removeUnmounted": [Function],
800
- "_stateFlags": Object {
801
- "action": false,
802
- "mount": true,
803
- "watch": false,
804
- },
805
- "_subjects": Object {
806
- "array": Object {
807
- "next": [Function],
808
- "observers": Array [],
809
- "subscribe": [Function],
810
- "unsubscribe": [Function],
811
- },
812
- "state": Object {
813
- "next": [Function],
814
- "observers": Array [
815
- Object {
816
- "next": [Function],
817
- },
818
- ],
819
- "subscribe": [Function],
820
- "unsubscribe": [Function],
821
- },
822
- "watch": Object {
823
- "next": [Function],
824
- "observers": Array [],
825
- "subscribe": [Function],
826
- "unsubscribe": [Function],
827
- },
828
- },
829
- "_updateFieldArray": [Function],
830
- "_updateValid": [Function],
831
- "getFieldState": [Function],
832
- "register": [Function],
833
- "unregister": [Function],
834
- }
835
- }
836
549
  disabled={false}
837
550
  name="name"
838
551
  onBlur={[Function]}
@@ -80,11 +80,11 @@ export function Default() {
80
80
  <BasicLayout>
81
81
  <Top>
82
82
  <Header>
83
- <HeaderSection>
84
- <HeaderContent>
83
+ <HeaderContent>
84
+ <HeaderSection>
85
85
  <GovGRLogo href="#" />
86
- </HeaderContent>
87
- </HeaderSection>
86
+ </HeaderSection>
87
+ </HeaderContent>
88
88
  </Header>
89
89
  </Top>
90
90
  <Content>
@@ -348,11 +348,11 @@ export default function Index() {
348
348
  <BasicLayout>
349
349
  <Top>
350
350
  <Header>
351
- <HeaderSection>
352
- <HeaderContent>
351
+ <HeaderContent>
352
+ <HeaderSection>
353
353
  <GovGRLogo href="#" />
354
- </HeaderContent>
355
- </HeaderSection>
354
+ </HeaderSection>
355
+ </HeaderContent>
356
356
  </Header>
357
357
  </Top>
358
358
  <Content>
@@ -17,22 +17,6 @@ export const Default = () => (
17
17
  primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
18
18
  secondary: 'Για παράδειγμα, 05 11 2020',
19
19
  }}
20
- extra={{
21
- options: [
22
- {
23
- label: { primary: 'Έχω συνάχι' },
24
- value: 'runny-nose',
25
- },
26
- {
27
- label: { primary: 'Έχω πυρετό' },
28
- value: 'fever',
29
- },
30
- {
31
- label: { primary: 'Αισθάνομαι κούραση' },
32
- value: 'fatigue',
33
- },
34
- ],
35
- }}
36
20
  />
37
21
  <Button type="submit">Συνέχεια</Button>
38
22
  </FormBuilder>
@@ -34,7 +34,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
34
34
  };
35
35
  return (
36
36
  <>
37
- <FileUploadContainer hasUploadedFile={files && files.length > 0}>
37
+ <FileUploadContainer hasFiles={files && files.length > 0}>
38
38
  {files?.length ? (
39
39
  <>
40
40
  <Paragraph>
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useCallback } from 'react';
2
- import SingleCharacterInputContainer, {
3
- SingleCharacterInputItem,
4
- } from '@digigov/ui/form/SingleCharacterInputContainer';
2
+ import SingleCharacterInputs, {
3
+ SingleCharacterInput,
4
+ } from '@digigov/ui/form/SingleCharacterInputs';
5
5
 
6
6
  export const RE_DIGIT = new RegExp(/^\d+$/);
7
7
  export const REMOVE_SPACES = new RegExp(/\s+/g);
@@ -119,16 +119,16 @@ function useOtp(onChange, maxLength) {
119
119
  };
120
120
  }
121
121
 
122
- const SingleCharacterInputItemPart = ({ ...props }) => {
123
- return <SingleCharacterInputItem {...props} />;
122
+ const SingleCharacterInputPart = ({ ...props }) => {
123
+ return <SingleCharacterInput {...props} />;
124
124
  };
125
125
 
126
126
  export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
127
127
  const otp = useOtp(props.onChange, maxLength);
128
128
  return (
129
- <SingleCharacterInputContainer>
129
+ <SingleCharacterInputs>
130
130
  {otp.otpValues.map((digit, idx) => (
131
- <SingleCharacterInputItemPart
131
+ <SingleCharacterInputPart
132
132
  name={`${name}-${idx}`}
133
133
  type="text"
134
134
  key={idx}
@@ -150,7 +150,7 @@ export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
150
150
  error={!digit ? props.error : false}
151
151
  />
152
152
  ))}
153
- </SingleCharacterInputContainer>
153
+ </SingleCharacterInputs>
154
154
  );
155
155
  };
156
156
 
@@ -13,7 +13,7 @@ export const Default = () => (
13
13
  name="string"
14
14
  type="choice:single"
15
15
  required
16
- label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
16
+ label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
17
17
  extra={{
18
18
  options: [
19
19
  {
@@ -13,7 +13,7 @@ export const WithDivider = () => (
13
13
  name="string"
14
14
  type="choice:single"
15
15
  required
16
- label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
16
+ label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
17
17
  extra={{
18
18
  options: [
19
19
  {
@@ -13,7 +13,7 @@ export const Default = () => (
13
13
  name="string"
14
14
  type="choice:single"
15
15
  required
16
- label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
16
+ label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
17
17
  extra={{
18
18
  component: 'Select',
19
19
  options: [