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

package/es/content/List/index.mdx

@@ -15,27 +15,15 @@ import List from '@digigov/ui/content/List';
 
 ### List with bullets
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="BulletList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="BulletList.tsx" />
 
 ### List with numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="NumberedList.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="NumberedList.tsx" />
 
 ### List with extra space
 
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="WithExtraSpace.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/List" story="WithExtraSpace.tsx" />
 
 ## API
 

package/es/content/StepNav/__stories__/Default.js

@@ -106,7 +106,7 @@ export var Default = function Default() {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
-      SetOpen = _useState2[1];
+      setOpen = _useState2[1];
 
   var _useState3 = useState(Array(data.length).fill(false)),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -137,7 +137,7 @@ export var Default = function Default() {
   }
 
   function openCloseAll() {
-    SetOpen(!open);
+    setOpen(!open);
   }
 
   return /*#__PURE__*/React.createElement(StepNav, null, /*#__PURE__*/React.createElement(StepNavControls, null, /*#__PURE__*/React.createElement(Button, {
@@ -156,9 +156,7 @@ export var Default = function Default() {
       }
     }, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
       "aria-controls": "content1"
-    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, {
-      open: openItem[index]
-    }, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
       id: "content1"
     }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
       return /*#__PURE__*/React.createElement(Button, {

package/es/content/StepNav/__stories__/WithHints.js

@@ -165,10 +165,8 @@ export var WithHints = function WithHints() {
       }
     }, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
       "aria-controls": "content1"
-    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, {
-      open: openItem[index]
-    }, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename)), /*#__PURE__*/React.createElement(Hint, {
-      fontSize: "14"
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename)), /*#__PURE__*/React.createElement(Hint, {
+      fontSize: 14
     }, field.date)))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
       id: "content1"
     }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {

package/es/content/StepNav/index.mdx

@@ -0,0 +1,21 @@
+---
+id: step-nav
+title: StepNav
+---
+
+# StepNav
+ StepNav is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import StepNav from '@digigov/ui/content/StepNav';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="Default.tsx" />
+
+### With hints
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="WithHints.tsx" />

package/es/content/SummaryList/SummaryList.stories.js

@@ -9,6 +9,7 @@ export default {
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithActions';
+export * from './__stories__/WithoutActions';
 export * from './__stories__/WithoutBorders';
 export * from './__stories__/WithKeyAndAction';
 export * from './__stories__/RowVariations';

package/es/content/SummaryList/__stories__/Default.js

@@ -3,11 +3,15 @@ import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A3\u03C5\u03BD\u03C4\u03AC\u03B3\u03BC\u03B1\u03C4\u03BF\u03C2 15, \u0391\u03B8\u03AE\u03BD\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))));
 
 export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+  return _ref;
 };
 export default Default;

package/es/content/SummaryList/__stories__/WithActions.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/content/SummaryList';
-import { ButtonGroup, Button } from '@digigov/ui/form/Button';
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Button, { ButtonGroup } from '@digigov/ui/form/Button';
 
-var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, " \u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039F\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A3\u03C5\u03BD\u03C4\u03AC\u03B3\u03BC\u03B1\u03C4\u03BF\u03C2 15, \u0391\u03B8\u03AE\u03BD\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
   variant: "link"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5")), /*#__PURE__*/React.createElement(Button, {
   variant: "link"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5"))))));
 
 export var WithActions = function WithActions() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+  return _ref;
 };
 export default WithActions;

package/es/content/SummaryList/__stories__/WithoutActions.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/content/SummaryList';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+
+export var WithoutActions = function WithoutActions() {
+  return _ref;
+};
+export default WithoutActions;

package/es/content/SummaryList/__stories__/WithoutBorders.js

@@ -1,11 +1,19 @@
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from '@digigov/ui/content/SummaryList';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+import Link from '@digigov/ui/navigation/Link';
 
 var _ref = /*#__PURE__*/React.createElement(SummaryList, {
   border: false
-}, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u03A3\u03C5\u03BD\u03C4\u03AC\u03B3\u03BC\u03B1\u03C4\u03BF\u03C2 15, \u0391\u03B8\u03AE\u03BD\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemAction, null)), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567")));
+}, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03B4\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1\u03C2")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5")))));
 
 export var WithoutBorders = function WithoutBorders() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+  return _ref;
 };
 export default WithoutBorders;

package/es/content/SummaryList/index.mdx

@@ -13,11 +13,7 @@ import SummaryList from '@digigov/ui/content/SummaryList';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
@@ -25,21 +21,13 @@ Assistive technology users, like those who use a screen reader, may hear the lin
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithActions.tsx" />
 
 ### Summary list without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithoutBorders.tsx" />
 
 ## API
 

package/es/content/Table/__stories__/DefinedWidth.js

@@ -23,11 +23,11 @@ var data = {
 };
 export var DefinedWidth = function DefinedWidth() {
   return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCaption, null, data.title), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, data.labels && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-half"
+    width: "50%"
   }, data.labels.name), /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-quarter"
+    width: "25%"
   }, data.labels.role), /*#__PURE__*/React.createElement(TableHeadCell, {
-    cellWidth: "one-quarter"
+    width: "25%"
   }, data.labels.email)))), /*#__PURE__*/React.createElement(TableBody, null, data.content && data.content.map(function (item, index) {
     return /*#__PURE__*/React.createElement(TableRow, {
       key: index

package/es/content/Table/__stories__/RowColors.js

@@ -11,27 +11,27 @@ var data = {
   content: [{
     date: '24-07-23 16:34',
     title: 'Ειδοποίηση',
-    actions: 'λεπτομέρειες',
+    actions: 'Λεπτομέρειες',
     "new": true
   }, {
     date: '24-07-23 12:41',
     title: 'Μήνυμα υπηρεσίας',
-    actions: 'λεπτομέρειες',
+    actions: 'Λεπτομέρειες',
     "new": true
   }, {
     date: '24-07-23 12:40',
     title: 'Μήνυμα από τον διαχειριστή',
-    actions: 'λεπτομέρειες',
+    actions: 'Λεπτομέρειες',
     "new": false
   }, {
     date: '23-07-23 15:14',
     title: 'Έχετε συνδεθεί',
-    actions: 'λεπτομέρειες',
+    actions: 'Λεπτομέρειες',
     "new": false
   }, {
     date: '23-07-23 13:25',
     title: 'Ο κωδικός άλλαξε',
-    actions: 'λεπτομέρειες',
+    actions: 'Λεπτομέρειες',
     "new": false
   }]
 };

package/es/content/Table/__stories__/WithFloatingScroll.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/ui/content/Table';
 import { TableFloatingScroll } from '@digigov/ui/content/Table/TableFloatingScroll';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 var labels = {
   name: 'Ονοματεπώνυμο',
   email: 'Email',
@@ -47,9 +46,11 @@ var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/R
   placement: "bottom"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
 

package/es/content/Table/index.js

@@ -6,21 +6,20 @@ import Table from '@digigov/react-core/Table';
 import TableSortIconContainer from '@digigov/react-core/TableSortIconContainer';
 import { CaretIcon } from '@digigov/ui/icons';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
   direction: 'up',
   marginRight: 1,
   marginTop: 1,
-  size: "md"
+  size: "sm"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(CaretIcon, {
   direction: 'down',
   marginRight: 1,
   marginTop: 1,
-  size: "md"
+  size: "sm"
 });
 
 export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(_ref, _ref4) {
@@ -50,15 +49,18 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
     marginLeft: 1
   }, /*#__PURE__*/React.createElement(CaretIcon, {
     direction: 'up',
-    size: "md",
+    size: "sm",
     variant: direction === 1 ? 'dark' : 'gray'
   }), /*#__PURE__*/React.createElement(CaretIcon, {
     direction: 'down',
-    size: "md",
+    size: "sm",
     variant: direction === -1 ? 'dark' : 'gray'
-  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === 1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(1);
       dropdownRef.current && (dropdownRef.current.open = false);
@@ -69,9 +71,10 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
         dropdownRef.current && (dropdownRef.current.open = false);
       }
     }
-  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === -1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(-1);
       dropdownRef.current && (dropdownRef.current.open = false);

package/es/content/Table/index.mdx

@@ -69,7 +69,7 @@ The prop `color='primary'` or `color='secondary'` is only functional when Table
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

package/es/content/TaskList/__stories__/Default.js

@@ -47,26 +47,26 @@ export var Default = function Default() {
 
       switch (task.status) {
         case 'Ολοκληρωθηκε':
-          tagColor = 'completed';
+          tagColor = 'info';
           break;
 
         case 'Σε εξελιξη':
-          tagColor = 'in-progress';
+          tagColor = 'primary';
           break;
 
         case 'Δεν εχει ξεκινησει':
-          tagColor = 'not-started';
+          tagColor = 'secondary';
           break;
 
         case 'Σε αναμονη':
-          tagColor = 'not-started';
+          tagColor = 'secondary';
           break;
       }
 
       return /*#__PURE__*/React.createElement(SummaryListItem, {
         key: key
       }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, /*#__PURE__*/React.createElement(LinkBase, null, task.text)), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(TaskListItemTag, {
-        status: tagColor
+        color: tagColor
       }, task.status)));
     }))));
   })));

package/es/content/TaskList/index.mdx

@@ -0,0 +1,21 @@
+---
+id: task-list
+title: TaskList
+---
+
+# TaskList
+ TaskList is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import TaskList from '@digigov/ui/content/TaskList';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/TaskList" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TaskList" />

package/es/content/Timeline/__stories__/Default.js

@@ -98,7 +98,7 @@ var _ref2 = /*#__PURE__*/React.createElement(Button, {
 
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Timeline, null, data && data.map(function (field, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimelineItem, {
+    return /*#__PURE__*/React.createElement(TimelineItem, {
       key: index,
       marginBottom: 10
     }, /*#__PURE__*/React.createElement(TimelineHeading, {
@@ -118,7 +118,7 @@ export var Default = function Default() {
         key: subIndex,
         variant: "link"
       }, action.label);
-    }), _ref, _ref2))));
+    }), _ref, _ref2)));
   }));
 };
 export default Default;

package/es/content/Timeline/index.mdx

@@ -0,0 +1,23 @@
+---
+id: timeline
+title: Timeline
+---
+
+# Timeline
+A timeline is a useful way to display a whole range of information and/or data points to a user.
+Keeping things organized in logical sequence timeline helps to keep track of what’s happening. 
+User can better understand what has happened and also understand what the next steps should be.
+
+```bash
+import Timeline from '@digigov/ui/content/Timeline';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/Timeline" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Timeline" />

package/es/feedback/CopyToClipboard/index.mdx

@@ -11,19 +11,11 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Default.tsx" />
 
 ### Banner
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Banner.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Banner.tsx" />
 
 ## API
 

package/es/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -9,4 +9,5 @@ export default {
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
-export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/es/feedback/ErrorSummary/__stories__/LinkedToCheckbox.js

@@ -6,6 +6,7 @@ import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/Field
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
   size: "sm"
@@ -13,7 +14,7 @@ var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.crea
   href: "#england"
 }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2.")), /*#__PURE__*/React.createElement(FieldContainer, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "england",
   value: "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1",
   id: "england"

package/es/feedback/ErrorSummary/__stories__/LinkedToField.js

@@ -12,10 +12,10 @@ var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.crea
   size: "sm"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#passport-date"
-}, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(FieldContainer, {
+}, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {
   error: true,
   id: "passport-date"
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03BF;"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD."), /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DateInputItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03AE\u03C2 \u03C3\u03B1\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03B9 \u03AD\u03C4\u03BF\u03C2."), /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DateInputItem, {
   name: "day"
 }, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
   name: "month"
@@ -23,7 +23,7 @@ var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.crea
   error: true,
   width: 4,
   name: "year"
-}, "\u03A7\u03C1\u03CC\u03BD\u03BF\u03C2")))));
+}, "\u0388\u03C4\u03BF\u03C2")))));
 
 export var LinkedToField = function LinkedToField() {
   return _ref;

package/es/feedback/ErrorSummary/__stories__/WithBackLinkAndButton.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { DateInputContainer, DateInputItem } from '@digigov/ui/form/DateInputContainer';
+import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { BackLink } from '@digigov/ui/navigation/BackLink';
+import Button from '@digigov/ui/form/Button';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BackLink, {
+  href: "/"
+}, "\u03A0\u03AF\u03C3\u03C9"), /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
+  href: "#passport-date"
+}, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03AD\u03C4\u03BF\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true,
+  id: "passport-date"
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03AE\u03C2 \u03C3\u03B1\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u0393\u03B9\u03B1 \u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1, 05 11 2020"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03B3\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03B9 \u03AD\u03C4\u03BF\u03C2."), /*#__PURE__*/React.createElement(DateInputContainer, null, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  error: true,
+  width: 4,
+  name: "year"
+}, "\u0388\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"));
+
+export var WithBackLinkAndButton = function WithBackLinkAndButton() {
+  return _ref;
+};
+export default WithBackLinkAndButton;