@digigov/ui 1.0.0-002c630d → 1.0.0-290a96e2

package/es/typography/NormalText/index.mdx

@@ -9,32 +9,22 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
 
 ### Variants
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontWeight.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/es/typography/Paragraph/__stories__/FontSizes.js

@@ -2,31 +2,31 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "14"
+  fontSize: 14
 }, " govgr-!-font-size-14 ");
 
 var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "16"
+  fontSize: 16
 }, " govgr-!-font-size-16 ");
 
 var _ref3 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "19"
+  fontSize: 19
 }, " govgr-!-font-size-19 ");
 
 var _ref4 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "24"
+  fontSize: 24
 }, " govgr-!-font-size-24 ");
 
 var _ref5 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "30"
+  fontSize: 30
 }, " govgr-!-font-size-30 ");
 
 var _ref6 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "48"
+  fontSize: 48
 }, " govgr-!-font-size-48 ");
 
 var _ref7 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "72"
+  fontSize: 72
 }, " govgr-!-font-size-72 ");
 
 export var FontSizes = function FontSizes() {

package/es/typography/Paragraph/__stories__/LeadVariant.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  variant: 'lg'
+  size: 'lg'
 }, "govgr-body");
 
 export var LeadVariant = function LeadVariant() {

package/es/typography/Paragraph/__stories__/SmallVariant.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 var _ref = /*#__PURE__*/React.createElement(Paragraph, {
-  variant: 'sm'
+  size: 'sm'
 }, "govgr-body");
 
 export var SmallVariant = function SmallVariant() {

package/es/typography/Paragraph/index.mdx

@@ -9,40 +9,25 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph"story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Paragraph" />

package/es/utils/Kitchensink/KitchensinkDashboard.js

@@ -4,7 +4,7 @@ import Paragraph from '@digigov/react-core/Paragraph';
 import { KitchensinkByCategory } from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
 
 var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
-  fontSize: "72",
+  fontSize: 72,
   fontWeight: "bold"
 }, "Components");
 

package/esm/app/CloseButton/index.js

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/CloseButton';
+import CloseButton from '@digigov/react-core/CloseButton';
+export default CloseButton;

package/esm/app/{FilterSection → FilterContainer}/index.js

@@ -1,12 +1,11 @@
-export * from '@digigov/react-core/FilterSection';
-export * from '@digigov/react-core/FilterHeading';
+export * from '@digigov/react-core/FilterContainer';
+export * from '@digigov/react-core/FilterHeadingContainer';
 export * from '@digigov/react-core/FilterContent';
 export * from '@digigov/react-core/FilterOptionsSection';
 export * from '@digigov/react-core/FilterSelectedHeading';
 export * from '@digigov/react-core/FilterSelectedSection';
-export * from '@digigov/react-core/FilterCloseButton';
 export * from '@digigov/react-core/ResultsHeading';
 export * from '@digigov/react-core/ResultsActionBar';
 export * from '@digigov/react-core/ResultsHeadingActions';
-import FilterSection from '@digigov/react-core/FilterSection';
-export default FilterSection;
+import FilterContainer from '@digigov/react-core/FilterContainer';
+export default FilterContainer;

package/esm/app/Footer/Footer.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>footer>div>div>div:nth-child(1)>p>a:nth-child(1)"
+                "selector": "html>body>div:nth-child(5)>footer>div>div>section:nth-child(1)>p>a:nth-child(1)"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>footer>div>div>div:nth-child(1)>p>a:nth-child(1)"
+                "selector": "html>body>div:nth-child(5)>footer>div>div>section:nth-child(1)>p>a:nth-child(1)"
               }
             }
           ],

package/esm/app/Footer/__stories__/DefaultCopyright.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterInlineList, FooterInlineListItem, FooterLink } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterList, FooterListItem, FooterLink } from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
-  grow: true
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterInlineList, null, /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: true,
+  "aria-label": "footer info section"
+}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+  layout: "horizontal"
+}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#terms"
-}, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"))), /*#__PURE__*/React.createElement(Copyright, null))), /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null))));
+}, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"))), /*#__PURE__*/React.createElement(Copyright, null))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
 
 export var DefaultCopyright = function DefaultCopyright() {
   return _ref;

package/esm/app/Footer/__stories__/FooterAllInclusive.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterNavigation, FooterSection, FooterHeading, FooterList, FooterListItem, FooterLink, FooterInlineList, FooterInlineListItem, FooterContentLogos, FooterImage } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterNavigation, FooterNavigationSection, FooterHeading, FooterList, FooterListItem, FooterLink, FooterContentLogos, FooterImage } from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
 import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterNavigationSection, {
+  "aria-label": "footer navigation section"
+}, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
   columns: 2
 }, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
@@ -23,16 +24,21 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
   href: "#"
 }, "\u038C\u03C1\u03BF\u03B9 \u03C7\u03C1\u03AE\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF ")))), /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03AD\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF ")))), /*#__PURE__*/React.createElement(FooterNavigationSection, {
+  "aria-label": "footer navigation section"
+}, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03AD\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u0395\u039C\u0394\u0394 - \u039C\u0399\u03A4\u039F\u03A3")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "EUGO"))))), /*#__PURE__*/React.createElement(SectionBreak, {
   visible: false,
   size: "md"
-}), /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
-  grow: true
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterInlineList, null, /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"))), /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
+}), /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: true,
+  "aria-label": "footer info section"
+}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+  layout: "horizontal"
+}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr"))), /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
   src: logo1
 }), /*#__PURE__*/React.createElement(FooterImage, {
   src: logo2
@@ -45,7 +51,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
 }, ' ', "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03BA\u03B1\u03B9 \u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://www.minedu.gov.gr/",
   target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A0\u03B1\u03B9\u03B4\u03B5\u03AF\u03B1\u03C2 \u03BA\u03B1\u03B9 \u0398\u03C1\u03B7\u03C3\u03BA\u03B5\u03C5\u03BC\u03AC\u03C4\u03C9\u03BD", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null))));
+}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A0\u03B1\u03B9\u03B4\u03B5\u03AF\u03B1\u03C2 \u03BA\u03B1\u03B9 \u0398\u03C1\u03B7\u03C3\u03BA\u03B5\u03C5\u03BC\u03AC\u03C4\u03C9\u03BD", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
 
 export var FooterAllInclusive = function FooterAllInclusive() {
   return _ref;

package/esm/app/Footer/__stories__/FooterWithLink.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterInlineList, FooterInlineListItem, FooterLink } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterList, FooterListItem, FooterLink } from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
-  grow: true
-}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterInlineList, null, /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: true,
+  "aria-label": "footer info section"
+}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+  layout: "horizontal"
+}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+}, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C4\u03BF gov.gr"))), /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://grnet.gr/",
@@ -18,7 +20,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
 }, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://mindigital.gr/",
   target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null))));
+}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
 
 export var FooterWithLink = function FooterWithLink() {
   return _ref;

package/esm/app/Footer/__stories__/FooterWithLogo.js

@@ -1,14 +1,15 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterContentLogos, FooterImage } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterContentLogos, FooterImage } from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
 import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
+var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+  "aria-label": "footer info section"
+}, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(FooterContentLogos, null, /*#__PURE__*/React.createElement(FooterImage, {
   src: logo1
 }), /*#__PURE__*/React.createElement(FooterImage, {
   src: logo2
@@ -18,7 +19,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
 }, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://mindigital.gr/",
   target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null))));
+}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
 
 export var FooterWithLogo = function FooterWithLogo() {
   return _ref;

package/esm/app/Footer/__stories__/FooterWithSecondaryNavigation.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterNavigation, FooterSection, FooterHeading, FooterList, FooterListItem, FooterLink } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterNavigation, FooterNavigationSection, FooterHeading, FooterList, FooterListItem, FooterLink } from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
+var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterNavigationSection, {
+  "aria-label": "footer navigation section"
+}, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2"), /*#__PURE__*/React.createElement(FooterList, {
   columns: 2
 }, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
@@ -21,22 +22,25 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
   href: "#"
 }, "\u038C\u03C1\u03BF\u03B9 \u03C7\u03C1\u03AE\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
-}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF ")))), /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03AD\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+}, "\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC \u03B1\u03C0\u03CC\u03C1\u03C1\u03B7\u03C4\u03BF ")))), /*#__PURE__*/React.createElement(FooterNavigationSection, {
+  "aria-label": "footer navigation section"
+}, /*#__PURE__*/React.createElement(FooterHeading, null, "\u0395\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03AD\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u0395\u039C\u0394\u0394 - \u039C\u0399\u03A4\u039F\u03A3")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "EUGO"))))), /*#__PURE__*/React.createElement(SectionBreak, {
   visible: false,
   size: "md"
-}), /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
-  grow: true
+}), /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+  grow: true,
+  "aria-label": "footer info section"
 }, /*#__PURE__*/React.createElement(FooterContent, null, /*#__PURE__*/React.createElement(Copyright, null, "\u03A5\u03BB\u03BF\u03C0\u03BF\u03AF\u03B7\u03C3\u03B7 \u03B1\u03C0\u03CC \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://grnet.gr/",
   target: "_blank"
 }, "\u0395\u0394\u03A5\u03A4\u0395", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)")), ' ', "\u03B3\u03B9\u03B1 \u03C4\u03BF", ' ', /*#__PURE__*/React.createElement(Link, {
   href: "https://mindigital.gr/",
   target: "_blank"
-}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null))));
+}, "\u03A5\u03C0\u03BF\u03C5\u03C1\u03B3\u03B5\u03AF\u03BF \u03A8\u03B7\u03C6\u03B9\u03B1\u03BA\u03AE\u03C2 \u0394\u03B9\u03B1\u03BA\u03C5\u03B2\u03AD\u03C1\u03BD\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(VisuallyHidden, null, ' ', "(\u03B1\u03BD\u03BF\u03AF\u03B3\u03B5\u03B9 \u03C3\u03B5 \u03BA\u03B1\u03B9\u03BD\u03BF\u03CD\u03C1\u03B9\u03B1 \u03BA\u03B1\u03C1\u03C4\u03AD\u03BB\u03B1)"))))), /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null)))));
 
 export var FooterWithSecondaryNavigation = function FooterWithSecondaryNavigation() {
   return _ref;

package/esm/app/Footer/__stories__/YearCopyright.js

@@ -1,23 +1,25 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
-import { FooterMeta, FooterMetaItem, FooterContent, FooterInlineList, FooterInlineListItem, FooterLink } from '@digigov/ui/app/Footer';
+import { Footer, FooterContainer, FooterInfo, FooterInfoSection, FooterContent, FooterList, FooterListItem, FooterLink } from '@digigov/ui/app/Footer';
 import { Copyright, getCopyright } from '@digigov/ui/govgr/Footer/Copyright';
 import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2");
 
-var _ref2 = /*#__PURE__*/React.createElement(FooterInlineList, null, /*#__PURE__*/React.createElement(FooterInlineListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
+var _ref2 = /*#__PURE__*/React.createElement(FooterList, {
+  layout: "horizontal"
+}, /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, {
   href: "#"
 }, "\u038C\u03C1\u03BF\u03B9 \u03BA\u03B1\u03B9 \u03A0\u03C1\u03BF\u03CB\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")));
 
-var _ref3 = /*#__PURE__*/React.createElement(FooterMetaItem, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
+var _ref3 = /*#__PURE__*/React.createElement(FooterInfoSection, null, /*#__PURE__*/React.createElement(HellenicRepublicLogo, null));
 
 export var YearCopyright = function YearCopyright() {
-  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
-    grow: true
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterContainer, null, /*#__PURE__*/React.createElement(FooterInfo, null, /*#__PURE__*/React.createElement(FooterInfoSection, {
+    grow: true,
+    "aria-label": "footer info section"
   }, /*#__PURE__*/React.createElement(FooterContent, null, _ref, _ref2, /*#__PURE__*/React.createElement(Copyright, {
     copyright: getCopyright()
-  }))), _ref3));
+  }))), _ref3)));
 };
 export default YearCopyright;

package/esm/app/Footer/index.js

@@ -4,14 +4,12 @@ export * from '@digigov/react-core/FooterContent';
 export * from '@digigov/react-core/FooterContentLogos';
 export * from '@digigov/react-core/FooterHeading';
 export * from '@digigov/react-core/FooterImage';
-export * from '@digigov/react-core/FooterInlineList';
-export * from '@digigov/react-core/FooterInlineListItem';
 export * from '@digigov/react-core/FooterLink';
 export * from '@digigov/react-core/FooterList';
 export * from '@digigov/react-core/FooterListItem';
-export * from '@digigov/react-core/FooterMeta';
-export * from '@digigov/react-core/FooterMetaItem';
+export * from '@digigov/react-core/FooterInfo';
+export * from '@digigov/react-core/FooterInfoSection';
 export * from '@digigov/react-core/FooterNavigation';
-export * from '@digigov/react-core/FooterSection';
+export * from '@digigov/react-core/FooterNavigationSection';
 import Footer from '@digigov/react-core/Footer';
 export default Footer;

package/esm/app/Footer/index.mdx

@@ -15,35 +15,19 @@ import Footer from '@digigov/ui/app/Footer';
 
 ### Footer with logos
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
 
 ### Footer with secondary navigation
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithSecondaryNavigation.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithSecondaryNavigation.tsx" />
 
 ### Footer with links to meta information
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLink.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLink.tsx" />
 
 ### All inclusive footer
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterAllInclusive.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterAllInclusive.tsx" />
 
 ## API
 

package/esm/app/Header/Header.stories.playwright.json

@@ -36,7 +36,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>details>summary"
+                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>ul>li>button"
               }
             }
           ],

package/esm/app/Header/__snapshots__/index.spec.tsx.snap

@@ -48,8 +48,5 @@ exports[`renders the header with logo, title and subtitle  1`] = `
   >
     A title
   </ForwardRef(HeaderTitle)>
-  <ForwardRef(HeaderSubtitle)>
-    A subtitle
-  </ForwardRef(HeaderSubtitle)>
 </ForwardRef(Header)>
 `;

package/esm/app/Header/__stories__/Default.js

@@ -4,7 +4,7 @@ import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
 import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 
-var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, {
   href: "#"
 }))));
 

package/esm/app/Header/__stories__/WithHeaderNavigation.js

@@ -5,34 +5,34 @@ import HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import { ArrowIcon } from '@digigov/ui/icons';
 import { BurgerIcon, MoreVertIcon } from '@digigov/ui/icons';
 import { Top } from '@digigov/ui/layouts/Basic';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
 import NavList from '@digigov/ui/navigation/NavList/NavList';
-import NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import List, { ListItem } from '@digigov/ui/content/List';
-import Link from '@digigov/ui/navigation/Link';
+import { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
-var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, {
+var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, {
   href: "#"
 }, "\u0394\u03B7\u03BB\u03CE\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(NavList, {
   active: true
-}, /*#__PURE__*/React.createElement(NavListItem, null, /*#__PURE__*/React.createElement(NavListItemLink, null, "\u039C\u03B5\u03BD\u03BF\u03CD ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-})))), /*#__PURE__*/React.createElement(Dropdown, {
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  arrow: true
+}, "\u039C\u03B5\u03BD\u03BF\u03CD")), /*#__PURE__*/React.createElement(Dropdown, {
   align: "right"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
 }, "\u039C\u0391\u03A1\u0399\u039F\u03A3 \u039C\u0395\u039D\u0395\u039E\u0395\u03A3", /*#__PURE__*/React.createElement(MoreVertIcon, {
-  size: "lg"
-})), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(List, {
-  margin: 0
-}, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2")))))), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(BurgerIcon, {
-  smUpHidden: true,
   size: "md"
-})))));
+})), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2"))))), /*#__PURE__*/React.createElement(BurgerIcon, {
+  smUpHidden: true,
+  size: "sm"
+}))));
 
 export var WithHeaderNavigation = function WithHeaderNavigation() {
   return _ref;