@digigov/ui 0.21.2 → 0.23.0

package/esm/app/Confirmation/Confirmation.mdx

@@ -1,3 +1,12 @@
 ---
+id: confirmation
 title: Confirmation
 ---
+
+```bash
+import Confirmation from '@digigov/ui/app/Confirmation';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/Confirmation" story="Default.tsx" />

package/esm/app/Footer/Footer.mdx

@@ -1,3 +1,30 @@
 ---
+id: footer
 title: Footer
 ---
+
+```bash
+import Footer from '@digigov/ui/app/Footer';
+``` 
+
+## How to use
+
+### Default footer
+
+<Story packageName="@digigov/ui" component="app/Footer" story="Default.tsx" />
+
+### Footer with logos
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
+
+### Footer with secondary navigation
+
+<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" />
+
+### All inclusive footer
+
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterAllInclusive.tsx" />

package/esm/app/Header/index.mdx

@@ -3,7 +3,25 @@ id: header
 title: Header
 ---
 
+
+```bash
+import Header from '@digigov/ui/app/Header';
+``` 
+
+## How to use
+
+### Default header
+
 <Story title="### Default" packageName="@digigov/ui" component="app/Header" story="Default.tsx" />
+
+### Header with service name
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithServiceName.tsx" />
+
+### Header with service logo and service name
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithServiceNameAndLogo.tsx" />
+
+### Default header with navigation
+
 <Story packageName="@digigov/ui" component="app/Header" story="WithNavigation.tsx" />

package/esm/app/I18nText.js

@@ -2,20 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 import React from 'react';
-import { defaultTranslate } from '@digigov/ui/app/i18n';
-import { useTranslation } from '@digigov/ui/app';
+import { defaultTranslate, useTranslation } from '@digigov/ui/app/i18n';
 
 var isObject = function isObject(value) {
   return !!(value && _typeof(value) === 'object' && !Array.isArray(value));
 };
 
 var resultTranslate = function resultTranslate(translation, children) {
-  var parser = new DOMParser();
+  if (typeof DOMParser !== 'undefined') {
+    var parser = new DOMParser();
 
-  var childrenCloned = _toConsumableArray(children);
+    var childrenCloned = _toConsumableArray(children);
 
-  var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
-  return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+    var doc1 = parser.parseFromString("<div>".concat(translation.replace(/<([0-9])>/g, '<t$1>').replace(/<\/([0-9])>/g, '</t$1>'), "</div>"), 'application/xml');
+    return recursiveReplace(childrenCloned, doc1.children[0].childNodes);
+  }
 };
 
 var recursiveReplace = function recursiveReplace(original, translation) {

package/esm/app/NotFound/index.mdx

@@ -0,0 +1,12 @@
+---
+id: not-found
+title: NotFound
+---
+
+```bash
+import NotFound from '@digigov/ui/app/NotFound';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/NotFound" story="Default.tsx" />

package/esm/app/PhaseBannerHeader/index.mdx

@@ -0,0 +1,12 @@
+---
+id: phase-banner-header
+title: PhaseBannerHeader
+---
+
+```bash
+import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="app/PhaseBannerHeader" story="Default.tsx" />

package/esm/core/Accordion/__stories__/Default.js

@@ -4,7 +4,23 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 import Link from '@digigov/ui/core/Link';
 import List, { ListItem } from '@digigov/ui/core/List';
 
-var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B1\u03B8\u03AD\u03C3\u03B9\u03BC\u03B7 \u03BA\u03B1\u03B9 \u03B5\u03BD\u03B5\u03C1\u03B3\u03AE \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03AC \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B5\u03BE\u03CE\u03B4\u03B9\u03BA\u03B7\u03C2 \u03B1\u03BD\u03B1\u03B3\u03BD\u03CE\u03C1\u03B9\u03C3\u03B7\u03C2 \u03B1\u03C0\u03B1\u03B9\u03C4\u03AE\u03C3\u03B5\u03C9\u03BD / \u03C3\u03C5\u03BC\u03B2\u03B9\u03B2\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03B5\u03C0\u03AF\u03BB\u03C5\u03C3\u03B7\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03CE\u03BD \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2, \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03B9\u03BF\u03C0\u03BF\u03B9\u03B7\u03BC\u03AD\u03BD\u03B5\u03C2 \u03C3\u03B5 \u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03B9\u03CE\u03BD."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BD\u03B9\u03B1\u03AF\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03C6\u03B5\u03C1\u03B5\u03B3\u03B3\u03C5\u03CC\u03C4\u03B7\u03C4\u03B1\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B1\u03C0\u03BF\u03C6\u03AC\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03BA\u03CC\u03B3\u03C1\u03B1\u03C6\u03B1")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BD\u03C4\u03AF\u03B3\u03C1\u03B1\u03C6\u03BF \u03C0\u03C1\u03B1\u03BA\u03C4\u03B9\u03BA\u03CE\u03BD \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD (\u03A0\u03BF\u03BB\u03B9\u03C4\u03B9\u03BA\u03AC / \u03A0\u03BF\u03B9\u03BD\u03B9\u03BA\u03AC \u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1)"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u039A\u03B1\u03C4\u03B1\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1 \u03BA\u03C1\u03AC\u03C4\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B7\u03B8\u03B9\u03BA\u03BF\u03CD / \u03C0\u03B5\u03B9\u03B8\u03B1\u03C1\u03C7\u03B9\u03BA\u03BF\u03CD \u03B5\u03BB\u03AD\u03B3\u03C7\u03BF\u03C5 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD"))))));
+var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content1"
+}, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content1"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B1\u03B8\u03AD\u03C3\u03B9\u03BC\u03B7 \u03BA\u03B1\u03B9 \u03B5\u03BD\u03B5\u03C1\u03B3\u03AE \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03AC \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B5\u03BE\u03CE\u03B4\u03B9\u03BA\u03B7\u03C2 \u03B1\u03BD\u03B1\u03B3\u03BD\u03CE\u03C1\u03B9\u03C3\u03B7\u03C2 \u03B1\u03C0\u03B1\u03B9\u03C4\u03AE\u03C3\u03B5\u03C9\u03BD / \u03C3\u03C5\u03BC\u03B2\u03B9\u03B2\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03B5\u03C0\u03AF\u03BB\u03C5\u03C3\u03B7\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03CE\u03BD \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content2"
+}, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content2"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2, \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03B9\u03BF\u03C0\u03BF\u03B9\u03B7\u03BC\u03AD\u03BD\u03B5\u03C2 \u03C3\u03B5 \u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03B9\u03CE\u03BD."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BD\u03B9\u03B1\u03AF\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03C6\u03B5\u03C1\u03B5\u03B3\u03B3\u03C5\u03CC\u03C4\u03B7\u03C4\u03B1\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B1\u03C0\u03BF\u03C6\u03AC\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content3"
+}, "\u0394\u03B9\u03BA\u03CC\u03B3\u03C1\u03B1\u03C6\u03B1")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content3"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BD\u03C4\u03AF\u03B3\u03C1\u03B1\u03C6\u03BF \u03C0\u03C1\u03B1\u03BA\u03C4\u03B9\u03BA\u03CE\u03BD \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD (\u03A0\u03BF\u03BB\u03B9\u03C4\u03B9\u03BA\u03AC / \u03A0\u03BF\u03B9\u03BD\u03B9\u03BA\u03AC \u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1)"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content4"
+}, "\u039A\u03B1\u03C4\u03B1\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1 \u03BA\u03C1\u03AC\u03C4\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content4"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B7\u03B8\u03B9\u03BA\u03BF\u03CD / \u03C0\u03B5\u03B9\u03B8\u03B1\u03C1\u03C7\u03B9\u03BA\u03BF\u03CD \u03B5\u03BB\u03AD\u03B3\u03C7\u03BF\u03C5 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD"))))));
 
 export var Default = function Default() {
   return _ref;

package/esm/core/Accordion/__stories__/WithHints.js

@@ -5,7 +5,23 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 import Link from '@digigov/ui/core/Link';
 import List, { ListItem } from '@digigov/ui/core/List';
 
-var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"), /*#__PURE__*/React.createElement(Hint, null, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03BA\u03B1\u03B9 \u03B5\u03BE\u03C9\u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF, \u03B5\u03BA\u03BA\u03B1\u03B8\u03AC\u03C1\u03B9\u03C3\u03B7 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B4\u03B1\u03C0\u03B1\u03BD\u03CE\u03BD \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B1\u03B8\u03AD\u03C3\u03B9\u03BC\u03B7 \u03BA\u03B1\u03B9 \u03B5\u03BD\u03B5\u03C1\u03B3\u03AE \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03AC \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B5\u03BE\u03CE\u03B4\u03B9\u03BA\u03B7\u03C2 \u03B1\u03BD\u03B1\u03B3\u03BD\u03CE\u03C1\u03B9\u03C3\u03B7\u03C2 \u03B1\u03C0\u03B1\u03B9\u03C4\u03AE\u03C3\u03B5\u03C9\u03BD / \u03C3\u03C5\u03BC\u03B2\u03B9\u03B2\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03B5\u03C0\u03AF\u03BB\u03C5\u03C3\u03B7\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03CE\u03BD \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD, \u03C0\u03B1\u03C1\u03B1\u03BA\u03BF\u03BB\u03BF\u03CD\u03B8\u03B7\u03C3\u03B7 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2, \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03B9\u03BF\u03C0\u03BF\u03B9\u03B7\u03BC\u03AD\u03BD\u03B5\u03C2 \u03C3\u03B5 \u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03B9\u03CE\u03BD."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BD\u03B9\u03B1\u03AF\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03C6\u03B5\u03C1\u03B5\u03B3\u03B3\u03C5\u03CC\u03C4\u03B7\u03C4\u03B1\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B1\u03C0\u03BF\u03C6\u03AC\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03BA\u03CC\u03B3\u03C1\u03B1\u03C6\u03B1"), /*#__PURE__*/React.createElement(Hint, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BD\u03C4\u03AF\u03B3\u03C1\u03B1\u03C6\u03BF \u03C0\u03C1\u03B1\u03BA\u03C4\u03B9\u03BA\u03CE\u03BD \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD (\u03A0\u03BF\u03BB\u03B9\u03C4\u03B9\u03BA\u03AC / \u03A0\u03BF\u03B9\u03BD\u03B9\u03BA\u03AC \u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1)"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u039A\u03B1\u03C4\u03B1\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1 \u03BA\u03C1\u03AC\u03C4\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B1\u03BD\u03AD\u03BD\u03C4\u03B1\u03BE\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD, \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC, \u03B5\u03C0\u03B9\u03C3\u03BA\u03B5\u03C0\u03C4\u03AE\u03C1\u03B9\u03B1 \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, null, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B7\u03B8\u03B9\u03BA\u03BF\u03CD / \u03C0\u03B5\u03B9\u03B8\u03B1\u03C1\u03C7\u03B9\u03BA\u03BF\u03CD \u03B5\u03BB\u03AD\u03B3\u03C7\u03BF\u03C5 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD"))))));
+var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content1"
+}, "\u0394\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u03B4\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"), /*#__PURE__*/React.createElement(Hint, null, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03BA\u03B1\u03B9 \u03B5\u03BE\u03C9\u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03AD\u03C2 \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF, \u03B5\u03BA\u03BA\u03B1\u03B8\u03AC\u03C1\u03B9\u03C3\u03B7 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B4\u03B1\u03C0\u03B1\u03BD\u03CE\u03BD \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content1"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B7\u03BD \u03B4\u03B9\u03B1\u03B8\u03AD\u03C3\u03B9\u03BC\u03B7 \u03BA\u03B1\u03B9 \u03B5\u03BD\u03B5\u03C1\u03B3\u03AE \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03AC \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B5\u03BE\u03CE\u03B4\u03B9\u03BA\u03B7\u03C2 \u03B1\u03BD\u03B1\u03B3\u03BD\u03CE\u03C1\u03B9\u03C3\u03B7\u03C2 \u03B1\u03C0\u03B1\u03B9\u03C4\u03AE\u03C3\u03B5\u03C9\u03BD / \u03C3\u03C5\u03BC\u03B2\u03B9\u03B2\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03B5\u03C0\u03AF\u03BB\u03C5\u03C3\u03B7\u03C2 \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03CE\u03BD \u03BC\u03B5 \u03C4\u03BF \u0394\u03B7\u03BC\u03CC\u03C3\u03B9\u03BF"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content2"
+}, "\u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD, \u03C0\u03B1\u03C1\u03B1\u03BA\u03BF\u03BB\u03BF\u03CD\u03B8\u03B7\u03C3\u03B7 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content2"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2, \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03B9\u03BF\u03C0\u03BF\u03B9\u03B7\u03BC\u03AD\u03BD\u03B5\u03C2 \u03C3\u03B5 \u03BF\u03BC\u03AC\u03B4\u03B5\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03B9\u03CE\u03BD."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BD\u03B9\u03B1\u03AF\u03BF \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AE\u03C2 \u03C6\u03B5\u03C1\u03B5\u03B3\u03B3\u03C5\u03CC\u03C4\u03B7\u03C4\u03B1\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AD\u03C2 \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B9\u03BA\u03AD\u03C2 \u03B1\u03C0\u03BF\u03C6\u03AC\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC \u03B4\u03B9\u03BA\u03B1\u03C3\u03C4\u03B7\u03C1\u03AF\u03C9\u03BD"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content3"
+}, "\u0394\u03B9\u03BA\u03CC\u03B3\u03C1\u03B1\u03C6\u03B1"), /*#__PURE__*/React.createElement(Hint, null, "\u0394\u03B9\u03B1\u03B4\u03B9\u03BA\u03B1\u03C3\u03AF\u03B5\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content3"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BD\u03C4\u03AF\u03B3\u03C1\u03B1\u03C6\u03BF \u03C0\u03C1\u03B1\u03BA\u03C4\u03B9\u03BA\u03CE\u03BD \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0397\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03AC\u03B8\u03B5\u03C3\u03B7 \u03B4\u03B9\u03BA\u03BF\u03B3\u03C1\u03AC\u03C6\u03C9\u03BD (\u03A0\u03BF\u03BB\u03B9\u03C4\u03B9\u03BA\u03AC / \u03A0\u03BF\u03B9\u03BD\u03B9\u03BA\u03AC \u0394\u03B9\u03BA\u03B1\u03C3\u03C4\u03AE\u03C1\u03B9\u03B1)"))))), /*#__PURE__*/React.createElement(AccordionSection, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, {
+  "aria-controls": "content4"
+}, "\u039A\u03B1\u03C4\u03B1\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1 \u03BA\u03C1\u03AC\u03C4\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B1\u03BD\u03AD\u03BD\u03C4\u03B1\u03BE\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD, \u03C0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03AC, \u03B5\u03C0\u03B9\u03C3\u03BA\u03B5\u03C0\u03C4\u03AE\u03C1\u03B9\u03B1 \u03BA.\u03AC.")), /*#__PURE__*/React.createElement(AccordionSectionContent, {
+  id: "content4"
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u03A3\u03C4\u03B7 \u03BB\u03AF\u03C3\u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03BC\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03B5\u03AF\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B5\u03C2 \u03C0\u03BF\u03C5 \u03B1\u03C6\u03BF\u03C1\u03BF\u03CD\u03BD \u03C4\u03BF \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03BF \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C2 \u03B6\u03C9\u03AE\u03C2."), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03B7\u03B8\u03B9\u03BA\u03BF\u03CD / \u03C0\u03B5\u03B9\u03B8\u03B1\u03C1\u03C7\u03B9\u03BA\u03BF\u03CD \u03B5\u03BB\u03AD\u03B3\u03C7\u03BF\u03C5 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7 \u03B1\u03C0\u03BF\u03C6\u03C5\u03BB\u03B1\u03BA\u03B9\u03C3\u03BC\u03AD\u03BD\u03C9\u03BD"))))));
 
 export var WithHints = function WithHints() {
   return _ref;

package/esm/core/Accordion/index.mdx

@@ -1,101 +1,33 @@
 ---
+id: accordion
 title: Accordion
-parent: docs/ui/components
 ---
 
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from '@digigov/ui/core/Accordion';
 
-## Example
+# Accordion
 
-<Accordion>
-  <AccordionItem>
-    <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Βασικων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-    <AccordionItemDetails>Περιεχομενο Υπολοιπων Ρυθμισεων</AccordionItemDetails>
-  </AccordionItem>
-</Accordion>
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
-## How to use
-
-```jsx live path=core/Accordion/index.tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemDetails,
-  AccordionItemSummary,
-} from 'govgr/components/Accordion';
-
-function CustomAccordion() {
-  return (
-    <Accordion>
-      <AccordionItem>
-        <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Βασικων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
-        <AccordionItemDetails>
-          Περιεχομενο Υπολοιπων Ρυθμισεων
-        </AccordionItemDetails>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-```
-
-## When to use this component
-
-Only use an accordion if there’s evidence it’s helpful for users to:
+The accordion component lets users show and hide sections of related content on a page.
 
-- see an overview of multiple, related sections of content
-- show and hide those sections as needed
+ 
 
-Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.
 
-## When not to use this component
+```bash
+import Accordion from '@digigov/ui/core/Accordion';
+``` 
 
-Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.
-
-Test your content without an accordion first. Consider if it’s better to:
-
-- simplify and reduce the amount of content
-- split the content across multiple pages
-- keep the content on a single page, separated by headings
-- use a list of links to let users navigate quickly to specific sections of content
-
-Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.
+## How to use
 
-Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.
+<Story packageName="@digigov/ui" component="core/Accordion" story="Default.tsx" />
 
-## API
+### Accordion with Hints
 
-### Properties
+Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<PropsDoc data={Accordion.__doc__} />
-<br />
-<PropsDoc data={AccordionItem.__doc__} />
-<br />
-<PropsDoc data={AccordionItemSummary.__doc__} />
-<br />
-<PropsDoc data={AccordionItemDetails.__doc__} />
+<Story packageName="@digigov/ui" component="core/Accordion" story="WithHints.tsx" />
 
-### Styles
+## Accessibility
 
-<StylesDoc data={Accordion.__doc__} />
-<br />
-<StylesDoc data={AccordionItem.__doc__} />
-<br />
-<StylesDoc data={AccordionItemSummary.__doc__} />
-<br />
-<StylesDoc data={AccordionItemDetails.__doc__} />
-<br />
+You can read more about the accessibility patterns used in our Accordion
+implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

package/esm/core/BackLink/index.mdx

@@ -0,0 +1,16 @@
+---
+id: back-link
+title: Back Link
+---
+
+# Back Link
+
+Use the back link component to help users go back to the previous page in a multi-page transaction.
+
+```bash
+import BackLink from "@digigov/ui/core/BackLink";
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/BackLink" story="Default.tsx" />

package/esm/core/Blockquote/index.mdx

@@ -1,8 +1,23 @@
 ---
-parent: docs/ui/components
+id: blockquote
 title: Blockquote
 ---
 
+
+# Blockquote
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Blockquote component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
 import Blockquote from '@digigov/ui/core/Blockquote';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Blockquote" story="Default.tsx" />
 
-## Example

package/esm/core/Breadcrumbs/__stories__/Default.js

@@ -1,7 +1,19 @@
 import React from 'react';
 import Breadcrumbs, { BreadcrumbsList, BreadcrumbsListItem } from '@digigov/ui/core/Breadcrumbs';
 
-var _ref = /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(BreadcrumbsList, null, /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, null, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
+var _ref = /*#__PURE__*/React.createElement(Breadcrumbs, {
+  role: "navigation",
+  "aria-label": "navigation"
+}, /*#__PURE__*/React.createElement(BreadcrumbsList, null, /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A5\u03B3\u03B5\u03AF\u03B1 \u03BA\u03B1\u03B9 \u03C0\u03C1\u03CC\u03BD\u03BF\u03B9\u03B1"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#"
+}, "\u03A6\u03AC\u03BA\u03B5\u03BB\u03BF\u03C2 \u03C5\u03B3\u03B5\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(BreadcrumbsListItem, {
+  href: "#",
+  "aria-current": "page"
+}, "\u0386\u03C5\u03BB\u03B7 \u03C3\u03C5\u03BD\u03C4\u03B1\u03B3\u03BF\u03B3\u03C1\u03AC\u03C6\u03B7\u03C3\u03B7")));
 
 export var Default = function Default() {
   return _ref;

package/esm/core/Breadcrumbs/breadcrumbs.mdx

@@ -0,0 +1,22 @@
+---
+id: breadcrumbs
+title: Breadcrumbs
+---
+
+
+# Breadcrumbs
+
+This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
+
+The Breadcrumbs component lets users show and hide sections of related content on a page.
+
+ 
+
+
+```bash
+import Breadcrumbs from '@digigov/ui/core/Breadcrumbs';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Breadcrumbs" story="Default.tsx" />

package/esm/core/Button/Button.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable digigov/no-relative-imports */
 import Button from '@digigov/ui/core/Button';
 export default {
   title: 'Digigov UI/Core/Button',
@@ -7,4 +8,9 @@ export * from './__stories__/Primary';
 export * from './__stories__/Secondary';
 export * from './__stories__/Warning';
 export * from './__stories__/GroupingButtons';
-export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/GroupingButtonsAndLinks';
+export * from './__stories__/CallToActionButton';
+export * from './__stories__/Disabled';
+export * from './__stories__/ButtonLinkButton';
+export * from './__stories__/Back';
+export * from './__stories__/WithVariantLink';

package/esm/core/Button/__stories__/Back.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BackButton } from '@digigov/ui/core/Button';
+
+var _ref = /*#__PURE__*/React.createElement(BackButton, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Back = function Back() {
+  return _ref;
+};
+export default BackButton;

package/esm/core/Button/__stories__/ButtonLinkButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonLink } from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+var _ref = /*#__PURE__*/React.createElement(ButtonLink, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1",
+  tabIndex: 0
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var ButtonLinkButton = function ButtonLinkButton() {
+  return _ref;
+};
+export default ButtonLinkButton;

package/esm/core/Button/__stories__/CallToActionButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CallToAction } from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+var _ref = /*#__PURE__*/React.createElement(CallToAction, {
+  href: "#",
+  role: "button",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1",
+  tabIndex: 0
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var CallToActionButton = function CallToActionButton() {
+  return _ref;
+};
+export default CallToActionButton;

package/esm/core/Button/__stories__/Disabled.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  disabled: true
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Disabled = function Disabled() {
+  return _ref;
+};
+export default Disabled;

package/esm/core/Button/__stories__/GroupingButtonsAndLinks.js

@@ -5,7 +5,9 @@ import Link from '@digigov/ui/core/Link';
  * My deescrition is the best description that was described
  */
 
-var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
+var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
 
 export var GroupingButtonsAndLinks = function GroupingButtonsAndLinks() {
   return _ref;

package/esm/core/Button/__stories__/Primary.js

@@ -4,7 +4,9 @@ import Button from '@digigov/ui/core/Button';
  * My primary descrition is the best description that was described
  */
 
-var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 export var Primary = function Primary() {
   return _ref;

package/esm/core/Button/__stories__/Secondary.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import Button from '@digigov/ui/core/Button';
 /**
- * My primary descrition is the best description that was described 
+ * My primary descrition is the best description that was described
  */
 
 var _ref = /*#__PURE__*/React.createElement(Button, {
-  color: "secondary"
+  color: "secondary",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 export var Secondary = function Secondary() {

package/esm/core/Button/__stories__/Warning.js

@@ -2,7 +2,8 @@ import React from 'react';
 import Button from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Button, {
-  color: "warning"
+  color: "warning",
+  "aria-label": "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
 
 export var Warning = function Warning() {

package/esm/core/Button/__stories__/WithVariantLink.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+export var WithVariantLink = function WithVariantLink() {
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      console.log('clicked');
+    },
+    variant: "link",
+    "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+  }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+};
+export default WithVariantLink;