@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

package/content/List/List.stories.d.ts

@@ -6,10 +6,60 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
+export namespace WithControls {
+    function render(args: any): React.JSX.Element;
+    namespace args {
+        let listStyle: string;
+        let layout: string;
+        let dense: boolean;
+        let listItems: string[];
+    }
+    namespace argTypes {
+        export namespace listStyle_1 {
+            let options: string[];
+            namespace control {
+                let type: string;
+            }
+        }
+        export { listStyle_1 as listStyle };
+        export namespace layout_1 {
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        export { layout_1 as layout };
+        export namespace dense_1 {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        export { dense_1 as dense };
+        export namespace listItems_1 {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        export { listItems_1 as listItems };
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
 export { Default } from "@digigov/ui/content/List/__stories__/Default";
 export { BulletList } from "@digigov/ui/content/List/__stories__/BulletList";
 export { NumberedList } from "@digigov/ui/content/List/__stories__/NumberedList";
 export { HorizontalList } from "@digigov/ui/content/List/__stories__/HorizontalList";
 export { WithExtraSpace } from "@digigov/ui/content/List/__stories__/WithExtraSpace";
 export { NestedBulletList } from "@digigov/ui/content/List/__stories__/NestedBulletList";
-import List from '@digigov/ui/content/List';
+import { List } from '@digigov/ui/content/List/List';
+import React from 'react';

package/content/List/List.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/content/List/List.stories.js"],
-  "sourcesContent": ["import List from '@digigov/ui/content/List';\nexport default {\n  title: 'Digigov UI/content/List',\n  description:\n    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',\n  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',\n  component: List,\n  displayName: 'List',\n};\nexport { Default } from '@digigov/ui/content/List/__stories__/Default';\nexport { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';\nexport { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';\nexport { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';\nexport { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';\nexport { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;",
+  "sources": ["../../../src/content/List/List.stories.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport { List } from '@digigov/ui/content/List/List';\nimport { ListItem } from '@digigov/ui/content/List/ListItem';\n\nexport default {\n  title: 'Digigov UI/content/List',\n  description:\n    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',\n  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',\n  component: List,\n  displayName: 'List',\n};\n\nexport const WithControls = {\n  render: (args) => {\n    return (\n      <List listStyle={args.listStyle} dense={args.dense} layout={args.layout}>\n        {args.listItems.map((item, index) => (\n          <ListItem key={index}>{item}</ListItem>\n        ))}\n      </List>\n    );\n  },\n  args: {\n    listStyle: 'none',\n    layout: 'vertical',\n    dense: false,\n    listItems: [\n      '\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD',\n      '\u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2',\n      '\u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2',\n    ],\n  },\n  argTypes: {\n    listStyle: {\n      options: ['none', 'bullet', 'number'],\n      control: { type: 'select' },\n    },\n    layout: {\n      options: ['vertical', 'horizontal'],\n      control: { type: 'select' },\n    },\n    dense: {\n      control: { type: 'boolean' },\n    },\n    listItems: {\n      control: { type: 'object' },\n    },\n  },\n  parameters: {\n    controls: { exclude: ['ref'] },\n  },\n};\n\nexport { Default } from '@digigov/ui/content/List/__stories__/Default';\nexport { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';\nexport { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';\nexport { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';\nexport { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';\nexport { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AACf;AAEO,MAAM,eAAe;AAAA,EAC1B,QAAQ,CAAC,SAAS;AAChB,WACE,oCAAC,QAAK,WAAW,KAAK,WAAW,OAAO,KAAK,OAAO,QAAQ,KAAK,UAC9D,KAAK,UAAU,IAAI,CAAC,MAAM,UACzB,oCAAC,YAAS,KAAK,SAAQ,IAAK,CAC7B,CACH;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU,QAAQ;AAAA,MACpC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,CAAC,YAAY,YAAY;AAAA,MAClC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,OAAO;AAAA,MACL,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,UAAU,EAAE,SAAS,CAAC,KAAK,EAAE;AAAA,EAC/B;AACF;AAEA,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;",
   "names": []
 }

package/content/List/__stories__/Default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/List/__stories__/Default.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { List } from '@digigov/ui/content/List/List';\nimport { ListItem } from '@digigov/ui/content/List/ListItem';\n\nexport const Default = () => (\n  <List>\n    <ListItem>\n      \u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD\n    </ListItem>\n    <ListItem>\n      \u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2\n    </ListItem>\n    <ListItem>\n      \u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2\n    </ListItem>\n  </List>\n);\n\nexport default Default;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAElB,MAAM,UAAU,MACrB,oCAAC,YACC,oCAAC,gBAAS,yRAEV,GACA,oCAAC,gBAAS,kLAEV,GACA,oCAAC,gBAAS,sQAEV,CACF;AAGF,IAAO,kBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { List } from '@digigov/ui/content/List/List';\nimport { ListItem } from '@digigov/ui/content/List/ListItem';\n\nexport const Default = () => (\n  <List>\n    <ListItem>\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B4\u03B9\u03B1\u03B3\u03BD\u03C9\u03C3\u03C4\u03B9\u03BA\u03CE\u03BD \u03B5\u03C1\u03B3\u03B1\u03C3\u03C4\u03B7\u03C1\u03B9\u03B1\u03BA\u03CE\u03BD \u03B5\u03BE\u03B5\u03C4\u03AC\u03C3\u03B5\u03C9\u03BD</ListItem>\n    <ListItem>\u03A0\u03C4\u03C5\u03C7\u03AF\u03B1 \u03C4\u03C1\u03B9\u03C4\u03BF\u03B2\u03AC\u03B8\u03BC\u03B9\u03B1\u03C2 \u03B5\u03BA\u03C0\u03B1\u03AF\u03B4\u03B5\u03C5\u03C3\u03B7\u03C2</ListItem>\n    <ListItem>\u03A5\u03C0\u03B5\u03CD\u03B8\u03C5\u03BD\u03B7 \u0394\u03AE\u03BB\u03C9\u03C3\u03B7 / \u0395\u03BE\u03BF\u03C5\u03C3\u03B9\u03BF\u03B4\u03CC\u03C4\u03B7\u03C3\u03B7 / \u0393\u03BD\u03AE\u03C3\u03B9\u03BF \u03A5\u03C0\u03BF\u03B3\u03C1\u03B1\u03C6\u03AE\u03C2</ListItem>\n  </List>\n);\n\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAElB,MAAM,UAAU,MACrB,oCAAC,YACC,oCAAC,gBAAS,yRAAiD,GAC3D,oCAAC,gBAAS,kLAA+B,GACzC,oCAAC,gBAAS,sQAAkD,CAC9D;AAGF,IAAO,kBAAQ;",
   "names": []
 }

package/content/Markdown/Markdown.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/Markdown/Markdown.stories.js"],
-  "sourcesContent": ["import Markdown from '@digigov/ui/content/Markdown';\nexport default {\n  title: 'Digigov UI/content/Markdown',\n  description:\n    'Display markdown content',\n  component: Markdown,\n  displayName: 'Markdown',\n};\nexport { Default } from '@digigov/ui/content/Markdown/__stories__/Default';\n"],
-  "mappings": "AAAA,OAAO,cAAc;AACrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;",
+  "sourcesContent": ["import Markdown from '@digigov/ui/content/Markdown';\nexport default {\n  title: 'Digigov UI/content/Markdown',\n  description: 'Display markdown content',\n  component: Markdown,\n  displayName: 'Markdown',\n};\nexport { Default } from '@digigov/ui/content/Markdown/__stories__/Default';\n"],
+  "mappings": "AAAA,OAAO,cAAc;AACrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;",
   "names": []
 }

package/content/Markdown/__stories__/Default/index.js

@@ -1,7 +1,7 @@
 import React from "react";
-import Grid from "@digigov/ui/layouts/Grid";
 import Markdown from "@digigov/ui/content/Markdown";
 import { SectionBreak } from "@digigov/ui/layouts";
+import Grid from "@digigov/ui/layouts/Grid";
 const markdownExamples = [
   "## \u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h2",
   "\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>",

package/content/Markdown/__stories__/Default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/Markdown/__stories__/Default.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport Markdown from '@digigov/ui/content/Markdown';\nimport { SectionBreak } from '@digigov/ui/layouts';\n\nconst markdownExamples = [\n  '## \u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h2',\n  '\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>',\n  '[\u03B5\u03B4\u03CE](http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang)',\n  '[https://pki.aped.gov.gr/repository](https://pki.aped.gov.gr/repository)',\n  '**\u03A3\u03B7\u03BC\u03B1\u03BD\u03C4\u03B9\u03BA\u03CC:**',\n  `\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B1\u03B9\u03C4\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03B3\u03B9\u03B1 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03B1 \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B9\u03BA\u03AE\u03C2 \u03A0\u03C1\u03AC\u03BE\u03B7\u03C2 \u03C0\u03BF\u03C5:\n  * \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 08/05/2013\n  * \u03BC\u03B5\u03C4\u03B1\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03AE \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03AC \u03C4\u03B7\u03C2 \u03BC\u03B5\u03C4\u03AC \u03C4\u03BF 2018\n  * \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC \u03C4\u03BF \u0395\u03B9\u03B4\u03B9\u03BA\u03CC \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u0391\u03B8\u03B7\u03BD\u03CE\u03BD \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 22/01/2018 \u03BA\u03B1\u03B9 \u03B1\u03C6\u03BF\u03C1\u03AC \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C4\u03B1 \u03C0\u03BF\u03C5 \u03C4\u03B5\u03BB\u03AD\u03C3\u03C4\u03B7\u03BA\u03B1\u03BD \u03C3\u03C4\u03BF \u03B5\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03CC\\n\\n`,\n  `\u0395\u03AC\u03BD \u03B5\u03AF\u03C3\u03C4\u03B5 \u03B5\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03AF\u03B1 \u03B1\u03C4\u03CC\u03BC\u03C9\u03BD \u03C0\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C3\u03BA\u03BF\u03BC\u03AF\u03C3\u03BF\u03C5\u03BD \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\n  \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03B5\u03C5\u03C4\u03B9\u03BA\u03CC\u03C2 (\u03B4\u03B7\u03BC\u03BF\u03C3\u03AF\u03BF\u03C5 \u03AE \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5) \u03AE \u03B1\u03BD\u03AE\u03BA\u03B5\u03C4\u03B5\n  \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03AC\u03BB\u03BB\u03B7 \u03BA\u03B1 \u03C4\u03B7\u03BD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7 \u03C3\u03B5 \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1,\n  \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF <b>\u038C\u03BD\u03BF\u03BC\u03B1 \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5</b>, \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03B5\u03C4\u03B9\u03BA\u03AC \u03B1\u03C6\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B5\u03BD\u03CC.`,\n];\n\nexport const Default = () => {\n  return (\n    <>\n      {markdownExamples.map((markdown, index) => (\n        <Grid container key={index} spacing={4}>\n          <Grid item xs={12} sm={6}>\n            {markdown}\n          </Grid>\n          <Grid item xs={12} sm={6}>\n            <Markdown content={markdown} />\n          </Grid>\n          <Grid item xs={12}>\n            <SectionBreak />\n          </Grid>\n        </Grid>\n      ))}\n    </>);\n};\n\nexport default Default;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA;AAAA;AAAA;AAIF;AAEO,MAAM,UAAU,MAAM;AAC3B,SACE,0DACG,iBAAiB,IAAI,CAAC,UAAU,UAC/B,oCAAC,QAAK,WAAS,MAAC,KAAK,OAAO,SAAS,KACnC,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACpB,QACH,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACrB,oCAAC,YAAS,SAAS,UAAU,CAC/B,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,MACb,oCAAC,kBAAa,CAChB,CACF,CACD,CACH;AACJ;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport Markdown from '@digigov/ui/content/Markdown';\nimport { SectionBreak } from '@digigov/ui/layouts';\nimport Grid from '@digigov/ui/layouts/Grid';\n\nconst markdownExamples = [\n  '## \u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h2',\n  '\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>',\n  '[\u03B5\u03B4\u03CE](http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang)',\n  '[https://pki.aped.gov.gr/repository](https://pki.aped.gov.gr/repository)',\n  '**\u03A3\u03B7\u03BC\u03B1\u03BD\u03C4\u03B9\u03BA\u03CC:**',\n  `\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B1\u03B9\u03C4\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03B3\u03B9\u03B1 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03B1 \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B9\u03BA\u03AE\u03C2 \u03A0\u03C1\u03AC\u03BE\u03B7\u03C2 \u03C0\u03BF\u03C5:\n  * \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 08/05/2013\n  * \u03BC\u03B5\u03C4\u03B1\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03AE \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03AC \u03C4\u03B7\u03C2 \u03BC\u03B5\u03C4\u03AC \u03C4\u03BF 2018\n  * \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC \u03C4\u03BF \u0395\u03B9\u03B4\u03B9\u03BA\u03CC \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u0391\u03B8\u03B7\u03BD\u03CE\u03BD \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 22/01/2018 \u03BA\u03B1\u03B9 \u03B1\u03C6\u03BF\u03C1\u03AC \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C4\u03B1 \u03C0\u03BF\u03C5 \u03C4\u03B5\u03BB\u03AD\u03C3\u03C4\u03B7\u03BA\u03B1\u03BD \u03C3\u03C4\u03BF \u03B5\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03CC\\n\\n`,\n  `\u0395\u03AC\u03BD \u03B5\u03AF\u03C3\u03C4\u03B5 \u03B5\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03AF\u03B1 \u03B1\u03C4\u03CC\u03BC\u03C9\u03BD \u03C0\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C3\u03BA\u03BF\u03BC\u03AF\u03C3\u03BF\u03C5\u03BD \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\n  \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03B5\u03C5\u03C4\u03B9\u03BA\u03CC\u03C2 (\u03B4\u03B7\u03BC\u03BF\u03C3\u03AF\u03BF\u03C5 \u03AE \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5) \u03AE \u03B1\u03BD\u03AE\u03BA\u03B5\u03C4\u03B5\n  \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03AC\u03BB\u03BB\u03B7 \u03BA\u03B1 \u03C4\u03B7\u03BD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7 \u03C3\u03B5 \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1,\n  \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF <b>\u038C\u03BD\u03BF\u03BC\u03B1 \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5</b>, \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03B5\u03C4\u03B9\u03BA\u03AC \u03B1\u03C6\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B5\u03BD\u03CC.`,\n];\n\nexport const Default = () => {\n  return (\n    <>\n      {markdownExamples.map((markdown, index) => (\n        <Grid container key={index} spacing={4}>\n          <Grid item xs={12} sm={6}>\n            {markdown}\n          </Grid>\n          <Grid item xs={12} sm={6}>\n            <Markdown content={markdown} />\n          </Grid>\n          <Grid item xs={12}>\n            <SectionBreak />\n          </Grid>\n        </Grid>\n      ))}\n    </>\n  );\n};\n\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,OAAO,UAAU;AAEjB,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA;AAAA;AAAA;AAIF;AAEO,MAAM,UAAU,MAAM;AAC3B,SACE,0DACG,iBAAiB,IAAI,CAAC,UAAU,UAC/B,oCAAC,QAAK,WAAS,MAAC,KAAK,OAAO,SAAS,KACnC,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACpB,QACH,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACrB,oCAAC,YAAS,SAAS,UAAU,CAC/B,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,MACb,oCAAC,kBAAa,CAChB,CACF,CACD,CACH;AAEJ;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/content/Markdown/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const Markdown: ({ children, content }: {
+export declare const Markdown: ({ children, content, }: {
     children?: React.ReactNode;
     content?: string;
 }) => React.JSX.Element;

package/content/Markdown/index.js

@@ -1,7 +1,10 @@
 import React from "react";
 import { useMarkdownToHTML } from "@digigov/ui/content/Markdown/useMarkdownToHTML";
 import SafeHTML from "@digigov/ui/content/SafeHTML";
-const Markdown = ({ children, content }) => {
+const Markdown = ({
+  children,
+  content
+}) => {
   content = content || children;
   const html = useMarkdownToHTML(content);
   return /* @__PURE__ */ React.createElement(SafeHTML, { content: html });

package/content/Markdown/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/Markdown/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { useMarkdownToHTML } from '@digigov/ui/content/Markdown/useMarkdownToHTML';\nimport SafeHTML from '@digigov/ui/content/SafeHTML';\n\nexport const Markdown = ({ children, content }: { children?: React.ReactNode; content?: string }) => {\n  content = content || children as string;\n\n  const html = useMarkdownToHTML(content);\n  return <SafeHTML content={html} />;\n};\n\nexport default Markdown;"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,yBAAyB;AAClC,OAAO,cAAc;AAEd,MAAM,WAAW,CAAC,EAAE,UAAU,QAAQ,MAAwD;AACnG,YAAU,WAAW;AAErB,QAAM,OAAO,kBAAkB,OAAO;AACtC,SAAO,oCAAC,YAAS,SAAS,MAAM;AAClC;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { useMarkdownToHTML } from '@digigov/ui/content/Markdown/useMarkdownToHTML';\nimport SafeHTML from '@digigov/ui/content/SafeHTML';\n\nexport const Markdown = ({\n  children,\n  content,\n}: {\n  children?: React.ReactNode;\n  content?: string;\n}) => {\n  content = content || (children as string);\n\n  const html = useMarkdownToHTML(content);\n  return <SafeHTML content={html} />;\n};\n\nexport default Markdown;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,yBAAyB;AAClC,OAAO,cAAc;AAEd,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAGM;AACJ,YAAU,WAAY;AAEtB,QAAM,OAAO,kBAAkB,OAAO;AACtC,SAAO,oCAAC,YAAS,SAAS,MAAM;AAClC;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/content/SafeHTML/SafeHTML.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/SafeHTML/SafeHTML.stories.js"],
-  "sourcesContent": ["import SafeHTML from '@digigov/ui/content/SafeHTML';\nexport default {\n  title: 'Digigov UI/content/SafeHTML',\n  description:\n    'Display html content',\n  component: SafeHTML,\n  displayName: 'SafeHTML',\n};\nexport { Default } from '@digigov/ui/content/SafeHTML/__stories__/Default';\n"],
-  "mappings": "AAAA,OAAO,cAAc;AACrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aACE;AAAA,EACF,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;",
+  "sourcesContent": ["import SafeHTML from '@digigov/ui/content/SafeHTML';\nexport default {\n  title: 'Digigov UI/content/SafeHTML',\n  description: 'Display html content',\n  component: SafeHTML,\n  displayName: 'SafeHTML',\n};\nexport { Default } from '@digigov/ui/content/SafeHTML/__stories__/Default';\n"],
+  "mappings": "AAAA,OAAO,cAAc;AACrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,aAAa;AAAA,EACb,WAAW;AAAA,EACX,aAAa;AACf;AACA,SAAS,eAAe;",
   "names": []
 }

package/content/SafeHTML/__stories__/Default/index.js

@@ -1,7 +1,7 @@
 import React from "react";
-import Grid from "@digigov/ui/layouts/Grid";
 import SafeHTML from "@digigov/ui/content/SafeHTML";
 import { SectionBreak } from "@digigov/ui/layouts";
+import Grid from "@digigov/ui/layouts/Grid";
 const htmlExamples = [
   "<h1>\u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h1</h1>",
   "\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>",

package/content/SafeHTML/__stories__/Default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/SafeHTML/__stories__/Default.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport Grid from '@digigov/ui/layouts/Grid';\nimport SafeHTML from '@digigov/ui/content/SafeHTML';\nimport { SectionBreak } from '@digigov/ui/layouts';\n\nconst htmlExamples = [\n  '<h1>\u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h1</h1>',\n  '\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>',\n  '<a target=\"_blank\" href=\"http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang\">\u03B5\u03B4\u03CE</a>',\n  `\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B1\u03B9\u03C4\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03B3\u03B9\u03B1 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03B1 \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B9\u03BA\u03AE\u03C2 \u03A0\u03C1\u03AC\u03BE\u03B7\u03C2 \u03C0\u03BF\u03C5:<br/><br/>\n  \u2022 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 08/05/2013<br/>\n  \u2022 \u03BC\u03B5\u03C4\u03B1\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03AE \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03AC \u03C4\u03B7\u03C2 \u03BC\u03B5\u03C4\u03AC \u03C4\u03BF 2018<br/>\n  \u2022 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC \u03C4\u03BF \u0395\u03B9\u03B4\u03B9\u03BA\u03CC \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u0391\u03B8\u03B7\u03BD\u03CE\u03BD \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 22/01/2018 \u03BA\u03B1\u03B9 \u03B1\u03C6\u03BF\u03C1\u03AC \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C4\u03B1 \u03C0\u03BF\u03C5 \u03C4\u03B5\u03BB\u03AD\u03C3\u03C4\u03B7\u03BA\u03B1\u03BD \u03C3\u03C4\u03BF \u03B5\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03CC<br/><br/>`,\n  `\u0395\u03AC\u03BD \u03B5\u03AF\u03C3\u03C4\u03B5 \u03B5\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC\u03C2 (\u03B4\u03B7\u03BC\u03BF\u03C3\u03AF\u03BF\u03C5 \u03AE \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5) \u03AE \u03B1\u03BD\u03AE\u03BA\u03B5\u03C4\u03B5\n    \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03AC\u03BB\u03BB\u03B7 \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03AF\u03B1 \u03B1\u03C4\u03CC\u03BC\u03C9\u03BD \u03C0\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C3\u03BA\u03BF\u03BC\u03AF\u03C3\u03BF\u03C5\u03BD \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\n    \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7 \u03C3\u03B5 \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1,\n    \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF <b>\u038C\u03BD\u03BF\u03BC\u03B1 \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5</b>, \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03B5\u03C4\u03B9\u03BA\u03AC \u03B1\u03C6\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B5\u03BD\u03CC.`,\n  '\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03BA\u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1: <ul><li>\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B3\u03AC\u03BC\u03BF\u03C5</li><li>\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03BF\u03B9\u03BA\u03BF\u03B3\u03B5\u03BD\u03B5\u03B9\u03B1\u03BA\u03AE\u03C2 \u03BA\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7\u03C2</li></ul>',\n  '\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03BA\u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1: <ol><li>\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B3\u03AC\u03BC\u03BF\u03C5</li><li>\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03BF\u03B9\u03BA\u03BF\u03B3\u03B5\u03BD\u03B5\u03B9\u03B1\u03BA\u03AE\u03C2 \u03BA\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7\u03C2</li></ol>',\n];\n\nexport const Default = () => {\n  return (\n    <>\n      {htmlExamples.map((html, index) => (\n        <Grid container key={index} spacing={4}>\n          <Grid item xs={12} sm={6}>\n            {html}\n          </Grid>\n          <Grid item xs={12} sm={6}>\n            <SafeHTML content={html} />\n          </Grid>\n          <Grid item xs={12}>\n            <SectionBreak />\n          </Grid>\n        </Grid>\n      ))}\n    </>);\n};\n\nexport default Default;"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAE7B,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA,EACA;AACF;AAEO,MAAM,UAAU,MAAM;AAC3B,SACE,0DACG,aAAa,IAAI,CAAC,MAAM,UACvB,oCAAC,QAAK,WAAS,MAAC,KAAK,OAAO,SAAS,KACnC,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACpB,IACH,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACrB,oCAAC,YAAS,SAAS,MAAM,CAC3B,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,MACb,oCAAC,kBAAa,CAChB,CACF,CACD,CACH;AACJ;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport SafeHTML from '@digigov/ui/content/SafeHTML';\nimport { SectionBreak } from '@digigov/ui/layouts';\nimport Grid from '@digigov/ui/layouts/Grid';\n\nconst htmlExamples = [\n  '<h1>\u03A0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1 h1</h1>',\n  '\u03A0\u03C1\u03BF\u03C2:<sup>(1)</sup>',\n  '<a target=\"_blank\" href=\"http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang\">\u03B5\u03B4\u03CE</a>',\n  `\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B1\u03B9\u03C4\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03B3\u03B9\u03B1 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03B1 \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B9\u03BA\u03AE\u03C2 \u03A0\u03C1\u03AC\u03BE\u03B7\u03C2 \u03C0\u03BF\u03C5:<br/><br/>\n  \u2022 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 08/05/2013<br/>\n  \u2022 \u03BC\u03B5\u03C4\u03B1\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03AE \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC\u03C3\u03C0\u03B1\u03C3\u03BC\u03AC \u03C4\u03B7\u03C2 \u03BC\u03B5\u03C4\u03AC \u03C4\u03BF 2018<br/>\n  \u2022 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03B1\u03C0\u03CC \u03C4\u03BF \u0395\u03B9\u03B4\u03B9\u03BA\u03CC \u039B\u03B7\u03BE\u03B9\u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u0391\u03B8\u03B7\u03BD\u03CE\u03BD \u03BC\u03B5\u03C4\u03AC \u03C4\u03B9\u03C2 22/01/2018 \u03BA\u03B1\u03B9 \u03B1\u03C6\u03BF\u03C1\u03AC \u03B3\u03B5\u03B3\u03BF\u03BD\u03CC\u03C4\u03B1 \u03C0\u03BF\u03C5 \u03C4\u03B5\u03BB\u03AD\u03C3\u03C4\u03B7\u03BA\u03B1\u03BD \u03C3\u03C4\u03BF \u03B5\u03BE\u03C9\u03C4\u03B5\u03C1\u03B9\u03BA\u03CC<br/><br/>`,\n  `\u0395\u03AC\u03BD \u03B5\u03AF\u03C3\u03C4\u03B5 \u03B5\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC\u03C2 (\u03B4\u03B7\u03BC\u03BF\u03C3\u03AF\u03BF\u03C5 \u03AE \u03B9\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03BF\u03CD \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5) \u03AE \u03B1\u03BD\u03AE\u03BA\u03B5\u03C4\u03B5\n    \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03AC\u03BB\u03BB\u03B7 \u03BA\u03B1\u03C4\u03B7\u03B3\u03BF\u03C1\u03AF\u03B1 \u03B1\u03C4\u03CC\u03BC\u03C9\u03BD \u03C0\u03BF\u03C5 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C3\u03BA\u03BF\u03BC\u03AF\u03C3\u03BF\u03C5\u03BD \u03B4\u03AE\u03BB\u03C9\u03C3\u03B7\n    \u03B1\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03B7\u03BD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7 \u03C3\u03B5 \u03C3\u03C7\u03BF\u03BB\u03B9\u03BA\u03AE \u03BC\u03BF\u03BD\u03AC\u03B4\u03B1,\n    \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF <b>\u038C\u03BD\u03BF\u03BC\u03B1 \u03C3\u03C7\u03BF\u03BB\u03B5\u03AF\u03BF\u03C5</b>, \u03B4\u03B9\u03B1\u03C6\u03BF\u03C1\u03B5\u03C4\u03B9\u03BA\u03AC \u03B1\u03C6\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03B5\u03BD\u03CC.`,\n  '\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03BA\u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1: <ul><li>\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B3\u03AC\u03BC\u03BF\u03C5</li><li>\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03BF\u03B9\u03BA\u03BF\u03B3\u03B5\u03BD\u03B5\u03B9\u03B1\u03BA\u03AE\u03C2 \u03BA\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7\u03C2</li></ul>',\n  '\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03BA\u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03B1 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1: <ol><li>\u03A0\u03B9\u03C3\u03C4\u03BF\u03C0\u03BF\u03B9\u03B7\u03C4\u03B9\u03BA\u03CC \u03B3\u03AC\u03BC\u03BF\u03C5</li><li>\u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7 \u03BF\u03B9\u03BA\u03BF\u03B3\u03B5\u03BD\u03B5\u03B9\u03B1\u03BA\u03AE\u03C2 \u03BA\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7\u03C2</li></ol>',\n];\n\nexport const Default = () => {\n  return (\n    <>\n      {htmlExamples.map((html, index) => (\n        <Grid container key={index} spacing={4}>\n          <Grid item xs={12} sm={6}>\n            {html}\n          </Grid>\n          <Grid item xs={12} sm={6}>\n            <SafeHTML content={html} />\n          </Grid>\n          <Grid item xs={12}>\n            <SectionBreak />\n          </Grid>\n        </Grid>\n      ))}\n    </>\n  );\n};\n\nexport default Default;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,SAAS,oBAAoB;AAC7B,OAAO,UAAU;AAEjB,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA;AAAA;AAAA;AAAA,EAIA;AAAA,EACA;AACF;AAEO,MAAM,UAAU,MAAM;AAC3B,SACE,0DACG,aAAa,IAAI,CAAC,MAAM,UACvB,oCAAC,QAAK,WAAS,MAAC,KAAK,OAAO,SAAS,KACnC,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACpB,IACH,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,KACrB,oCAAC,YAAS,SAAS,MAAM,CAC3B,GACA,oCAAC,QAAK,MAAI,MAAC,IAAI,MACb,oCAAC,kBAAa,CAChB,CACF,CACD,CACH;AAEJ;AAEA,IAAO,kBAAQ;",
   "names": []
 }

package/content/SafeHTML/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const getClosingTags: (htmlString: any) => string[];
 export interface SafeHTMLProps {
     content: string;
-    tags?: Array<string>;
+    tags?: string[];
     Tag?: string;
     style?: React.CSSProperties;
 }

package/content/SafeHTML/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/SafeHTML/index.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport DomPurify from 'dompurify';\n\nconst defaultTags = [\n  'b',\n  'strong',\n  'sub',\n  'sup',\n  'br',\n  'a',\n  'p',\n  'ul',\n  'li',\n  'ol',\n];\n\nconst elementClassNameMapping = {\n  a: 'ds-link',\n  p: 'ds-body',\n  b: 'ds-bold',\n  strong: 'ds-bold',\n  sub: 'ds-sub',\n  ul: 'ds-list ds-list--bullet',\n  ol: 'ds-list ds-list--number',\n  li: 'ds-list__item',\n};\n\nif (typeof window !== 'undefined') {\n  DomPurify.addHook('afterSanitizeAttributes', function(node) {\n    if (node.tagName.toLowerCase() in elementClassNameMapping) {\n      node.setAttribute(\n        'class',\n        elementClassNameMapping[node.tagName.toLowerCase()]\n      );\n    }\n    // set all elements owning target to target=_blank\n    if ('target' in node) {\n      node.setAttribute('target', '_blank');\n      node.setAttribute('rel', 'noopener');\n    }\n  });\n}\n\nexport const getClosingTags = (htmlString) => {\n  const tags = htmlString.match(/<[^>]+\\/?>/g);\n  const stack: Array<string> = [];\n  if (!tags) {\n    return stack;\n  }\n  for (const tag of tags) {\n    if (tag.startsWith('</') && tag.endsWith('>')) {\n      const tagName = tag.replace('</', '<');\n      // @ts-ignore\n      const openingTag = stack.findLastIndex((element) => element === tagName);\n      if (openingTag !== -1) {\n        stack.splice(openingTag, 1);\n      }\n    } else {\n      stack.push(tag.split(' ').length > 1 ? `${tag.split(' ')[0]}>` : tag);\n    }\n  }\n  return stack;\n};\n\nexport interface SafeHTMLProps {\n  content: string;\n  tags?: Array<string>;\n  Tag?: string;\n  style?: React.CSSProperties;\n}\n\nexport const SafeHTML = ({\n  content,\n  tags,\n  Tag = 'span',\n  ...props\n}: SafeHTMLProps) => {\n  if (tags) {\n    tags.push(...defaultTags);\n  } else {\n    tags = defaultTags;\n  }\n  const parsedHTML = useMemo(() => {\n    return DomPurify.sanitize(content, {\n      ALLOWED_TAGS: tags,\n      ADD_ATTR: ['target'],\n    });\n  }, [content]);\n  return (\n    <Tag\n      // @ts-ignore\n      dangerouslySetInnerHTML={{\n        __html: parsedHTML,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default SafeHTML;\n"],
-  "mappings": "AAAA,OAAO,SAAS,eAAe;AAC/B,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,OAAO,WAAW,aAAa;AACjC,YAAU,QAAQ,2BAA2B,SAAS,MAAM;AAC1D,QAAI,KAAK,QAAQ,YAAY,KAAK,yBAAyB;AACzD,WAAK;AAAA,QACH;AAAA,QACA,wBAAwB,KAAK,QAAQ,YAAY,CAAC;AAAA,MACpD;AAAA,IACF;AAEA,QAAI,YAAY,MAAM;AACpB,WAAK,aAAa,UAAU,QAAQ;AACpC,WAAK,aAAa,OAAO,UAAU;AAAA,IACrC;AAAA,EACF,CAAC;AACH;AAEO,MAAM,iBAAiB,CAAC,eAAe;AAC5C,QAAM,OAAO,WAAW,MAAM,aAAa;AAC3C,QAAM,QAAuB,CAAC;AAC9B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,aAAW,OAAO,MAAM;AACtB,QAAI,IAAI,WAAW,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG;AAC7C,YAAM,UAAU,IAAI,QAAQ,MAAM,GAAG;AAErC,YAAM,aAAa,MAAM,cAAc,CAAC,YAAY,YAAY,OAAO;AACvE,UAAI,eAAe,IAAI;AACrB,cAAM,OAAO,YAAY,CAAC;AAAA,MAC5B;AAAA,IACF,OAAO;AACL,YAAM,KAAK,IAAI,MAAM,GAAG,EAAE,SAAS,IAAI,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG;AAAA,IACtE;AAAA,EACF;AACA,SAAO;AACT;AASO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,GAAG;AACL,MAAqB;AACnB,MAAI,MAAM;AACR,SAAK,KAAK,GAAG,WAAW;AAAA,EAC1B,OAAO;AACL,WAAO;AAAA,EACT;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,WAAO,UAAU,SAAS,SAAS;AAAA,MACjC,cAAc;AAAA,MACd,UAAU,CAAC,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,CAAC;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,yBAAyB;AAAA,QACvB,QAAQ;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport DomPurify from 'dompurify';\n\nconst defaultTags = [\n  'b',\n  'strong',\n  'sub',\n  'sup',\n  'br',\n  'a',\n  'p',\n  'ul',\n  'li',\n  'ol',\n];\n\nconst elementClassNameMapping = {\n  a: 'ds-link',\n  p: 'ds-body',\n  b: 'ds-bold',\n  strong: 'ds-bold',\n  sub: 'ds-sub',\n  ul: 'ds-list ds-list--bullet',\n  ol: 'ds-list ds-list--number',\n  li: 'ds-list__item',\n};\n\nif (typeof window !== 'undefined') {\n  DomPurify.addHook('afterSanitizeAttributes', function (node) {\n    if (node.tagName.toLowerCase() in elementClassNameMapping) {\n      node.setAttribute(\n        'class',\n        elementClassNameMapping[node.tagName.toLowerCase()]\n      );\n    }\n    // set all elements owning target to target=_blank\n    if ('target' in node) {\n      node.setAttribute('target', '_blank');\n      node.setAttribute('rel', 'noopener');\n    }\n  });\n}\n\nexport const getClosingTags = (htmlString) => {\n  const tags = htmlString.match(/<[^>]+\\/?>/g);\n  const stack: string[] = [];\n  if (!tags) {\n    return stack;\n  }\n  for (const tag of tags) {\n    if (tag.startsWith('</') && tag.endsWith('>')) {\n      const tagName = tag.replace('</', '<');\n      // @ts-ignore\n      const openingTag = stack.findLastIndex((element) => element === tagName);\n      if (openingTag !== -1) {\n        stack.splice(openingTag, 1);\n      }\n    } else {\n      stack.push(tag.split(' ').length > 1 ? `${tag.split(' ')[0]}>` : tag);\n    }\n  }\n  return stack;\n};\n\nexport interface SafeHTMLProps {\n  content: string;\n  tags?: string[];\n  Tag?: string;\n  style?: React.CSSProperties;\n}\n\nexport const SafeHTML = ({\n  content,\n  tags,\n  Tag = 'span',\n  ...props\n}: SafeHTMLProps) => {\n  if (tags) {\n    tags.push(...defaultTags);\n  } else {\n    tags = defaultTags;\n  }\n  const parsedHTML = useMemo(() => {\n    return DomPurify.sanitize(content, {\n      ALLOWED_TAGS: tags,\n      ADD_ATTR: ['target'],\n    });\n  }, [content]);\n  return (\n    <Tag\n      // @ts-ignore\n      dangerouslySetInnerHTML={{\n        __html: parsedHTML,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default SafeHTML;\n"],
+  "mappings": "AAAA,OAAO,SAAS,eAAe;AAC/B,OAAO,eAAe;AAEtB,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,OAAO,WAAW,aAAa;AACjC,YAAU,QAAQ,2BAA2B,SAAU,MAAM;AAC3D,QAAI,KAAK,QAAQ,YAAY,KAAK,yBAAyB;AACzD,WAAK;AAAA,QACH;AAAA,QACA,wBAAwB,KAAK,QAAQ,YAAY,CAAC;AAAA,MACpD;AAAA,IACF;AAEA,QAAI,YAAY,MAAM;AACpB,WAAK,aAAa,UAAU,QAAQ;AACpC,WAAK,aAAa,OAAO,UAAU;AAAA,IACrC;AAAA,EACF,CAAC;AACH;AAEO,MAAM,iBAAiB,CAAC,eAAe;AAC5C,QAAM,OAAO,WAAW,MAAM,aAAa;AAC3C,QAAM,QAAkB,CAAC;AACzB,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,aAAW,OAAO,MAAM;AACtB,QAAI,IAAI,WAAW,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG;AAC7C,YAAM,UAAU,IAAI,QAAQ,MAAM,GAAG;AAErC,YAAM,aAAa,MAAM,cAAc,CAAC,YAAY,YAAY,OAAO;AACvE,UAAI,eAAe,IAAI;AACrB,cAAM,OAAO,YAAY,CAAC;AAAA,MAC5B;AAAA,IACF,OAAO;AACL,YAAM,KAAK,IAAI,MAAM,GAAG,EAAE,SAAS,IAAI,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG;AAAA,IACtE;AAAA,EACF;AACA,SAAO;AACT;AASO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,GAAG;AACL,MAAqB;AACnB,MAAI,MAAM;AACR,SAAK,KAAK,GAAG,WAAW;AAAA,EAC1B,OAAO;AACL,WAAO;AAAA,EACT;AACA,QAAM,aAAa,QAAQ,MAAM;AAC/B,WAAO,UAAU,SAAS,SAAS;AAAA,MACjC,cAAc;AAAA,MACd,UAAU,CAAC,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,CAAC;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,yBAAyB;AAAA,QACvB,QAAQ;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;",
   "names": []
 }

package/content/StepNav/__stories__/Auto.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/StepNav/__stories__/Auto.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport {\n  StepNavCircleNumber,\n  StepNavControls,\n  StepNavList,\n  StepNavListItem,\n  StepNavAccordionContent,\n  StepNavAccordionSummary,\n  StepNavAccordionSummaryHeading,\n  StepNavAccordionHeadingTitle,\n  StepNavAccordionHeadingText,\n\n} from '@digigov/ui/content/StepNav';\nimport {\n  StepNavAuto,\n  StepNavAccordionAuto,\n  StepNavCloseAllButtonAuto,\n  StepNavOpenAllButtonAuto,\n} from '@digigov/ui/content/StepNav/auto';\n\nimport {\n  SummaryList,\n  SummaryListItem,\n  SummaryListItemAction,\n  SummaryListItemKey,\n  SummaryListItemValue,\n} from '@digigov/ui/content/SummaryList';\nimport { Button, ButtonGroup } from '@digigov/ui/form/Button';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nconst data = [\n  {\n    title: '\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7',\n    codename: '(KEP-APA)',\n    date: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '637283494',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1 ',\n    codename: '(MORE-DOCS)',\n    date: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '637283494',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B3\u03B9\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1',\n    codename: '(MORE-DOCS-REQUEST)',\n    date: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '974256',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2 \u039C\u03CC\u03BD\u03B9\u03BC\u03B7\u03C2 \u039A\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2',\n    codename: '(PERMRES-FOREIS)',\n    date: '3 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 5:42\u03BC.\u03BC.',\n    actions: [\n      {\n        label: '\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7',\n      },\n      {\n        label: '\u0391\u03AF\u03C4\u03B7\u03BC\u03B1 \u03B3\u03B9\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1',\n      },\n    ],\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '3 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 5:42\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '475747',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n];\n\nexport const Auto = () => {\n  return (\n    <StepNavAuto defaultOpen={'1'} singleOpen>\n      <StepNavControls>\n        <StepNavOpenAllButtonAuto>\u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD</StepNavOpenAllButtonAuto>\n        <StepNavCloseAllButtonAuto>\u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7 \u03CC\u03BB\u03C9\u03BD</StepNavCloseAllButtonAuto>\n      </StepNavControls>\n      <StepNavList>\n        {data &&\n          data.map((field, index) => {\n            return (\n              <StepNavListItem key={index}>\n                <StepNavAccordionAuto id={`${index}`}>\n                  <StepNavAccordionSummary>\n                    <StepNavAccordionSummaryHeading aria-controls=\"content1\">\n                      <StepNavCircleNumber border={false}></StepNavCircleNumber>\n                      {index === 1 ? (\n                        <StepNavCircleNumber border={false}>\n                          <VisuallyHidden>\u0392\u03AE\u03BC\u03B1</VisuallyHidden>\n                          \u03BA\u03B1\u03B9\n                        </StepNavCircleNumber>\n                      ) : (\n                        <StepNavCircleNumber>\n                          <VisuallyHidden>\u0392\u03AE\u03BC\u03B1</VisuallyHidden>\n                          {index > 1 ? index : index + 1}\n                        </StepNavCircleNumber>\n                      )}\n                      <StepNavAccordionHeadingTitle>\n                        <StepNavAccordionHeadingText>\n                          {field.title}\n                          {field.codename && (\n                            <>\n                              {' - '} {field.codename}\n                            </>\n                          )}\n                        </StepNavAccordionHeadingText>\n                      </StepNavAccordionHeadingTitle>\n                    </StepNavAccordionSummaryHeading>\n                  </StepNavAccordionSummary>\n                  <StepNavAccordionContent id=\"content1\">\n                    <ButtonGroup>\n                      {(field.actions || []).map((action, subIndex) => (\n                        <Button color=\"primary\" key={subIndex}>\n                          {action.label}\n                        </Button>\n                      ))}\n                      <Button color=\"secondary\">\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5</Button>\n                    </ButtonGroup>\n                    {field.details && (\n                      <SummaryList>\n                        {field.details.map((field, index) => {\n                          return (\n                            <SummaryListItem key={index}>\n                              <SummaryListItemKey>\n                                {field.name}\n                              </SummaryListItemKey>\n                              <SummaryListItemValue>\n                                {field.value}\n                              </SummaryListItemValue>\n                              {field.actions && (\n                                <SummaryListItemAction>\n                                  <ButtonGroup>\n                                    {field.actions &&\n                                      field.actions.map((action, subIndex) => {\n                                        return (\n                                          <Button key={subIndex} variant=\"link\">\n                                            {action}\n                                          </Button>\n                                        );\n                                      })}\n                                  </ButtonGroup>\n                                </SummaryListItemAction>\n                              )}\n                            </SummaryListItem>\n                          );\n                        })}\n                      </SummaryList>\n                    )}\n                  </StepNavAccordionContent>\n                </StepNavAccordionAuto>\n              </StepNavListItem>\n            );\n          })}\n      </StepNavList>\n    </StepNavAuto>\n  );\n};\n\nexport default Auto;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport {\n  StepNavCircleNumber,\n  StepNavControls,\n  StepNavList,\n  StepNavListItem,\n  StepNavAccordionContent,\n  StepNavAccordionSummary,\n  StepNavAccordionSummaryHeading,\n  StepNavAccordionHeadingTitle,\n  StepNavAccordionHeadingText,\n} from '@digigov/ui/content/StepNav';\nimport {\n  StepNavAuto,\n  StepNavAccordionAuto,\n  StepNavCloseAllButtonAuto,\n  StepNavOpenAllButtonAuto,\n} from '@digigov/ui/content/StepNav/auto';\n\nimport {\n  SummaryList,\n  SummaryListItem,\n  SummaryListItemAction,\n  SummaryListItemKey,\n  SummaryListItemValue,\n} from '@digigov/ui/content/SummaryList';\nimport { Button, ButtonGroup } from '@digigov/ui/form/Button';\nimport { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';\n\nconst data = [\n  {\n    title: '\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7',\n    codename: '(KEP-APA)',\n    date: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '637283494',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u03A3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1 ',\n    codename: '(MORE-DOCS)',\n    date: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '7 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 12:32\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '637283494',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u03B3\u03B9\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1',\n    codename: '(MORE-DOCS-REQUEST)',\n    date: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '5 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 8:32\u03C0.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '974256',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n  {\n    title: '\u0391\u03AF\u03C4\u03B7\u03C3\u03B7 \u0392\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2 \u039C\u03CC\u03BD\u03B9\u03BC\u03B7\u03C2 \u039A\u03B1\u03C4\u03BF\u03B9\u03BA\u03AF\u03B1\u03C2',\n    codename: '(PERMRES-FOREIS)',\n    date: '3 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 5:42\u03BC.\u03BC.',\n    actions: [\n      {\n        label: '\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7',\n      },\n      {\n        label: '\u0391\u03AF\u03C4\u03B7\u03BC\u03B1 \u03B3\u03B9\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03C9\u03BC\u03B1\u03C4\u03B9\u03BA\u03AC \u03AD\u03B3\u03B3\u03C1\u03B1\u03C6\u03B1',\n      },\n    ],\n    details: [\n      {\n        name: '\u0397\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1',\n        value: '3 \u0391\u03C0\u03C1\u03B9\u03BB\u03AF\u03BF\u03C5 2023, 5:42\u03BC.\u03BC.',\n      },\n      {\n        name: '\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2',\n        value: '\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7',\n        actions: ['\u0391\u03BD\u03AC\u03B8\u03B5\u03C3\u03B7'],\n      },\n      {\n        name: '\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03C0\u03B1\u03BB\u03AE\u03B8\u03B5\u03C5\u03C3\u03B7\u03C2',\n        value: '475747',\n      },\n      {\n        name: '\u039A\u03B1\u03C4\u03AC\u03C3\u03C4\u03B1\u03C3\u03B7',\n        value: '\u0395\u03B9\u03C3\u03B5\u03C1\u03C7\u03CC\u03BC\u03B5\u03BD\u03B7',\n        actions: ['\u0391\u03BB\u03BB\u03B1\u03B3\u03AE'],\n      },\n    ],\n  },\n];\n\nexport const Auto = () => {\n  return (\n    <StepNavAuto defaultOpen={'1'} singleOpen>\n      <StepNavControls>\n        <StepNavOpenAllButtonAuto>\u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD</StepNavOpenAllButtonAuto>\n        <StepNavCloseAllButtonAuto>\u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7 \u03CC\u03BB\u03C9\u03BD</StepNavCloseAllButtonAuto>\n      </StepNavControls>\n      <StepNavList>\n        {data &&\n          data.map((field, index) => {\n            return (\n              <StepNavListItem key={index}>\n                <StepNavAccordionAuto id={`${index}`}>\n                  <StepNavAccordionSummary>\n                    <StepNavAccordionSummaryHeading aria-controls=\"content1\">\n                      <StepNavCircleNumber border={false}></StepNavCircleNumber>\n                      {index === 1 ? (\n                        <StepNavCircleNumber border={false}>\n                          <VisuallyHidden>\u0392\u03AE\u03BC\u03B1</VisuallyHidden>\n                          \u03BA\u03B1\u03B9\n                        </StepNavCircleNumber>\n                      ) : (\n                        <StepNavCircleNumber>\n                          <VisuallyHidden>\u0392\u03AE\u03BC\u03B1</VisuallyHidden>\n                          {index > 1 ? index : index + 1}\n                        </StepNavCircleNumber>\n                      )}\n                      <StepNavAccordionHeadingTitle>\n                        <StepNavAccordionHeadingText>\n                          {field.title}\n                          {field.codename && (\n                            <>\n                              {' - '} {field.codename}\n                            </>\n                          )}\n                        </StepNavAccordionHeadingText>\n                      </StepNavAccordionHeadingTitle>\n                    </StepNavAccordionSummaryHeading>\n                  </StepNavAccordionSummary>\n                  <StepNavAccordionContent id=\"content1\">\n                    <ButtonGroup>\n                      {(field.actions || []).map((action, subIndex) => (\n                        <Button color=\"primary\" key={subIndex}>\n                          {action.label}\n                        </Button>\n                      ))}\n                      <Button color=\"secondary\">\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5</Button>\n                    </ButtonGroup>\n                    {field.details && (\n                      <SummaryList>\n                        {field.details.map((field, index) => {\n                          return (\n                            <SummaryListItem key={index}>\n                              <SummaryListItemKey>\n                                {field.name}\n                              </SummaryListItemKey>\n                              <SummaryListItemValue>\n                                {field.value}\n                              </SummaryListItemValue>\n                              {field.actions && (\n                                <SummaryListItemAction>\n                                  <ButtonGroup>\n                                    {field.actions &&\n                                      field.actions.map((action, subIndex) => {\n                                        return (\n                                          <Button key={subIndex} variant=\"link\">\n                                            {action}\n                                          </Button>\n                                        );\n                                      })}\n                                  </ButtonGroup>\n                                </SummaryListItemAction>\n                              )}\n                            </SummaryListItem>\n                          );\n                        })}\n                      </SummaryList>\n                    )}\n                  </StepNavAccordionContent>\n                </StepNavAccordionAuto>\n              </StepNavListItem>\n            );\n          })}\n      </StepNavList>\n    </StepNavAuto>\n  );\n};\n\nexport default Auto;\n"],
+  "mappings": "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",
   "names": ["field", "index"]
 }

package/content/StepNav/auto/index.js

@@ -4,7 +4,9 @@ import StepNav from "@digigov/react-core/StepNav";
 import {
   StepNavAccordion
 } from "@digigov/react-core/StepNavAccordion";
-import { useAccordion as useStepNav } from "@digigov/ui/content/Accordion/hooks";
+import {
+  useAccordion as useStepNav
+} from "@digigov/ui/content/Accordion/hooks";
 const StepNavContext = React.createContext(null);
 const StepNavAuto = ({
   singleOpen,

package/content/StepNav/auto.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ButtonProps } from '@digigov/react-core/Button';
 import { StepNavAccordionProps } from '@digigov/react-core/StepNavAccordion';
-import { UseAccordionReturn as useStepNavReturn } from '@digigov/ui/content/Accordion/hooks';
-import { AccordionItemId as StepNavItemId } from '@digigov/ui/content/Accordion/hooks';
+import { UseAccordionReturn as useStepNavReturn, AccordionItemId as StepNavItemId } from '@digigov/ui/content/Accordion/hooks';
 export interface ButtonAutoProps extends ButtonProps {
 }
 export interface StepNavAccordionAutoProps extends StepNavAccordionProps {

package/content/StepNav/auto.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/content/StepNav/auto.tsx"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Button, ButtonProps } from '@digigov/react-core/Button';\nimport StepNav from '@digigov/react-core/StepNav';\nimport {\n  StepNavAccordion,\n  StepNavAccordionProps,\n} from '@digigov/react-core/StepNavAccordion';\nimport { UseAccordionReturn as useStepNavReturn } from '@digigov/ui/content/Accordion/hooks';\nimport { AccordionItemId as StepNavItemId } from '@digigov/ui/content/Accordion/hooks';\nimport { useAccordion as useStepNav } from '@digigov/ui/content/Accordion/hooks';\n\nexport interface ButtonAutoProps extends ButtonProps {}\nexport interface StepNavAccordionAutoProps extends StepNavAccordionProps {\n  id: string;\n}\n\nconst StepNavContext = React.createContext<useStepNavReturn | null>(null);\nexport const StepNavAuto = ({\n  singleOpen,\n  defaultOpen,\n  children,\n  ...props\n}: {\n  singleOpen?: boolean;\n  defaultOpen?: StepNavItemId;\n  children: React.ReactNode;\n}) => {\n  const accordion = useStepNav({\n    singleOpen,\n    defaultOpen,\n  });\n\n  return (\n    <StepNavContext.Provider value={accordion}>\n      <StepNav {...props}>{children}</StepNav>\n    </StepNavContext.Provider>\n  );\n};\nexport const useStepNavContext = (): useStepNavReturn | null => {\n  const context = useContext(StepNavContext);\n  return context;\n};\n\nexport const StepNavAccordionAuto = React.forwardRef<\n  HTMLDetailsElement,\n  StepNavAccordionAutoProps\n>(function StepNavAccordionAuto({ id, ...props }, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavAccordionAuto must be used within an StepNavProvider'\n    );\n  }\n  const { section } = context;\n  return (\n    <StepNavAccordion\n      {...section(id)}\n      ref={section(id).ref || ref}\n      {...props}\n    />\n  );\n});\n\nexport const StepNavOpenAllButtonAuto = React.forwardRef<\n  HTMLButtonElement,\n  ButtonAutoProps\n>(function StepNavOpenAllButtonAuto(props, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavOpenAllButton must be used within an StepNavProvider'\n    );\n  }\n  const { openAll, hasOpen } = context;\n  return !hasOpen ? (\n    <Button variant=\"link\" ref={ref} onClick={openAll} {...props} />\n  ) : null;\n});\n\nexport const StepNavCloseAllButtonAuto = React.forwardRef<\n  HTMLButtonElement,\n  ButtonAutoProps\n>(function StepNavCloseAllButtonAuto(props, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavCloseAllButton must be used within an StepNavProvider'\n    );\n  }\n  const { closeAll, hasOpen } = context;\n  return hasOpen ? (\n    <Button variant=\"link\" ref={ref} onClick={closeAll} {...props} />\n  ) : null;\n});\n"],
-  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAClC,SAAS,cAA2B;AACpC,OAAO,aAAa;AACpB;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,gBAAgB,kBAAkB;AAO3C,MAAM,iBAAiB,MAAM,cAAuC,IAAI;AACjE,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,YAAY,WAAW;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,aAC9B,oCAAC,WAAS,GAAG,SAAQ,QAAS,CAChC;AAEJ;AACO,MAAM,oBAAoB,MAA+B;AAC9D,QAAM,UAAU,WAAW,cAAc;AACzC,SAAO;AACT;AAEO,MAAM,uBAAuB,MAAM,WAGxC,SAASA,sBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACrD,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,IAAI;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,QAAQ,EAAE;AAAA,MACd,KAAK,QAAQ,EAAE,EAAE,OAAO;AAAA,MACvB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,MAAM,2BAA2B,MAAM,WAG5C,SAASC,0BAAyB,OAAO,KAAK;AAC9C,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,SAAO,CAAC,UACN,oCAAC,UAAO,SAAQ,QAAO,KAAU,SAAS,SAAU,GAAG,OAAO,IAC5D;AACN,CAAC;AAEM,MAAM,4BAA4B,MAAM,WAG7C,SAASC,2BAA0B,OAAO,KAAK;AAC/C,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,UAAU,QAAQ,IAAI;AAC9B,SAAO,UACL,oCAAC,UAAO,SAAQ,QAAO,KAAU,SAAS,UAAW,GAAG,OAAO,IAC7D;AACN,CAAC;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Button, ButtonProps } from '@digigov/react-core/Button';\nimport StepNav from '@digigov/react-core/StepNav';\nimport {\n  StepNavAccordion,\n  StepNavAccordionProps,\n} from '@digigov/react-core/StepNavAccordion';\nimport {\n  UseAccordionReturn as useStepNavReturn,\n  AccordionItemId as StepNavItemId,\n  useAccordion as useStepNav,\n} from '@digigov/ui/content/Accordion/hooks';\n\nexport interface ButtonAutoProps extends ButtonProps {}\nexport interface StepNavAccordionAutoProps extends StepNavAccordionProps {\n  id: string;\n}\n\nconst StepNavContext = React.createContext<useStepNavReturn | null>(null);\nexport const StepNavAuto = ({\n  singleOpen,\n  defaultOpen,\n  children,\n  ...props\n}: {\n  singleOpen?: boolean;\n  defaultOpen?: StepNavItemId;\n  children: React.ReactNode;\n}) => {\n  const accordion = useStepNav({\n    singleOpen,\n    defaultOpen,\n  });\n\n  return (\n    <StepNavContext.Provider value={accordion}>\n      <StepNav {...props}>{children}</StepNav>\n    </StepNavContext.Provider>\n  );\n};\nexport const useStepNavContext = (): useStepNavReturn | null => {\n  const context = useContext(StepNavContext);\n  return context;\n};\n\nexport const StepNavAccordionAuto = React.forwardRef<\n  HTMLDetailsElement,\n  StepNavAccordionAutoProps\n>(function StepNavAccordionAuto({ id, ...props }, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavAccordionAuto must be used within an StepNavProvider'\n    );\n  }\n  const { section } = context;\n  return (\n    <StepNavAccordion\n      {...section(id)}\n      ref={section(id).ref || ref}\n      {...props}\n    />\n  );\n});\n\nexport const StepNavOpenAllButtonAuto = React.forwardRef<\n  HTMLButtonElement,\n  ButtonAutoProps\n>(function StepNavOpenAllButtonAuto(props, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavOpenAllButton must be used within an StepNavProvider'\n    );\n  }\n  const { openAll, hasOpen } = context;\n  return !hasOpen ? (\n    <Button variant=\"link\" ref={ref} onClick={openAll} {...props} />\n  ) : null;\n});\n\nexport const StepNavCloseAllButtonAuto = React.forwardRef<\n  HTMLButtonElement,\n  ButtonAutoProps\n>(function StepNavCloseAllButtonAuto(props, ref) {\n  const context = useStepNavContext();\n  if (!context) {\n    throw new Error(\n      'StepNavCloseAllButton must be used within an StepNavProvider'\n    );\n  }\n  const { closeAll, hasOpen } = context;\n  return hasOpen ? (\n    <Button variant=\"link\" ref={ref} onClick={closeAll} {...props} />\n  ) : null;\n});\n"],
+  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAClC,SAAS,cAA2B;AACpC,OAAO,aAAa;AACpB;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EAGE,gBAAgB;AAAA,OACX;AAOP,MAAM,iBAAiB,MAAM,cAAuC,IAAI;AACjE,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,YAAY,WAAW;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oCAAC,eAAe,UAAf,EAAwB,OAAO,aAC9B,oCAAC,WAAS,GAAG,SAAQ,QAAS,CAChC;AAEJ;AACO,MAAM,oBAAoB,MAA+B;AAC9D,QAAM,UAAU,WAAW,cAAc;AACzC,SAAO;AACT;AAEO,MAAM,uBAAuB,MAAM,WAGxC,SAASA,sBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACrD,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,QAAQ,IAAI;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,QAAQ,EAAE;AAAA,MACd,KAAK,QAAQ,EAAE,EAAE,OAAO;AAAA,MACvB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,MAAM,2BAA2B,MAAM,WAG5C,SAASC,0BAAyB,OAAO,KAAK;AAC9C,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,SAAO,CAAC,UACN,oCAAC,UAAO,SAAQ,QAAO,KAAU,SAAS,SAAU,GAAG,OAAO,IAC5D;AACN,CAAC;AAEM,MAAM,4BAA4B,MAAM,WAG7C,SAASC,2BAA0B,OAAO,KAAK;AAC/C,QAAM,UAAU,kBAAkB;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,QAAM,EAAE,UAAU,QAAQ,IAAI;AAC9B,SAAO,UACL,oCAAC,UAAO,SAAQ,QAAO,KAAU,SAAS,UAAW,GAAG,OAAO,IAC7D;AACN,CAAC;",
   "names": ["StepNavAccordionAuto", "StepNavOpenAllButtonAuto", "StepNavCloseAllButtonAuto"]
 }

package/content/Table/Table.stories/index.js

@@ -1,4 +1,14 @@
-import Table from "@digigov/ui/content/Table";
+import React from "react";
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell
+} from "@digigov/ui/content/Table";
 var Table_stories_default = {
   title: "Digigov UI/content/Table",
   description: "Use the table component to make information easier to compare and scan for users.",
@@ -6,6 +16,158 @@ var Table_stories_default = {
   component: Table,
   displayName: "Table"
 };
+const data = {
+  title: "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2",
+  labels: {
+    name: "\u039F\u03BD\u03BF\u03BC\u03B1\u03C4\u03B5\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF",
+    role: "\u03A1\u03CC\u03BB\u03BF\u03C2",
+    email: "Email",
+    phone: "\u038F\u03C1\u03B5\u03C2"
+  },
+  content: [
+    {
+      name: "\u039C\u03AC\u03C1\u03B9\u03BF\u03C2 \u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "marios@mail.com",
+      phone: "34"
+    },
+    {
+      name: "\u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5",
+      role: "\u03A7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "kalliopi@mail.com",
+      phone: "65"
+    },
+    {
+      name: "\u039C\u03B1\u03C1\u03AF\u03B1 \u03A6\u03BB\u03BF\u03CD\u03C0\u03B7",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "maria@mail.com",
+      phone: "12"
+    },
+    {
+      name: "\u0397\u03BB\u03AD\u03BA\u03C4\u03C1\u03B1 \u0391\u03C0\u03BF\u03C3\u03C4\u03CC\u03BB\u03BF\u03C5",
+      role: "\u0394\u03B9\u03B1\u03C7\u03B5\u03B9\u03C1\u03B9\u03C3\u03C4\u03AE\u03C2",
+      email: "ilektra@mail.com",
+      phone: "26"
+    }
+  ]
+};
+const WithControls = {
+  render: (args) => {
+    return /* @__PURE__ */ React.createElement(TableContainer, { border: args.containerBorder }, /* @__PURE__ */ React.createElement(
+      Table,
+      {
+        headerVariant: args.headerVariant,
+        verticalBorders: args.verticalBorders,
+        variant: args.variant,
+        dense: args.dense,
+        stacked: args.stacked
+      },
+      data && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableCaption, { size: args.tableCaptionSize }, data.title), /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map((key, index) => /* @__PURE__ */ React.createElement(
+        TableHeadCell,
+        {
+          key,
+          width: index === 0 && args.firstTableHeadCellWidth,
+          dataType: key === "phone" && args.tableHeadCellDataType
+        },
+        data.labels[key]
+      )))), /* @__PURE__ */ React.createElement(TableBody, null, data.content && data.content.map((item, index) => /* @__PURE__ */ React.createElement(
+        TableRow,
+        {
+          key: index,
+          highlight: index === 1 && args.tableRowHighlight,
+          color: index === 1 && args.tableRowColor
+        },
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.name }, item.name),
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.role }, item.role),
+        /* @__PURE__ */ React.createElement(TableDataCell, { "data-label": data.labels.email }, item.email),
+        /* @__PURE__ */ React.createElement(
+          TableDataCell,
+          {
+            "data-label": data.labels.phone,
+            dataType: args.tableHeadCellDataType
+          },
+          item.phone
+        )
+      ))))
+    ));
+  },
+  args: {
+    containerBorder: false,
+    headerVariant: "light",
+    verticalBorders: false,
+    variant: "default",
+    stacked: "md",
+    dense: false,
+    tableCaptionSize: "md",
+    tableRowHighlight: false,
+    tableRowColor: "primary",
+    firstTableHeadCellWidth: "25%",
+    tableHeadCellDataType: "text"
+  },
+  argTypes: {
+    containerBorder: {
+      control: {
+        type: "boolean"
+      }
+    },
+    headerVariant: {
+      options: ["dark", "light"],
+      control: { type: "inline-radio" }
+    },
+    verticalBorders: {
+      control: {
+        type: "boolean"
+      }
+    },
+    variant: {
+      control: { type: "inline-radio" },
+      options: ["default", "zebra"]
+    },
+    stacked: {
+      control: {
+        type: "select"
+      },
+      options: ["always", "sm", "md", "never"]
+    },
+    dense: {
+      control: {
+        type: "boolean"
+      }
+    },
+    tableCaptionSize: {
+      control: {
+        type: "select"
+      },
+      options: ["sm", "md", "lg", "xl"]
+    },
+    tableRowHighlight: {
+      control: {
+        type: "boolean"
+      }
+    },
+    tableRowColor: {
+      control: {
+        type: "inline-radio"
+      },
+      options: ["primary", "secondary"]
+    },
+    firstTableHeadCellWidth: {
+      control: {
+        type: "select"
+      },
+      options: ["25%", "33.3%", "50%", "66.6%", "75%", "100%", "full"]
+    },
+    tableHeadCellDataType: {
+      control: {
+        type: "inline-radio"
+      },
+      options: ["numeric", "text"]
+    }
+  },
+  parameters: {
+    controls: { exclude: ["ref"] }
+  }
+};
 import { Default } from "@digigov/ui/content/Table/__stories__/Default";
 import { TableCaptions } from "@digigov/ui/content/Table/__stories__/TableCaptions";
 import { NoData } from "@digigov/ui/content/Table/__stories__/NoData";
@@ -39,6 +201,7 @@ export {
   TableCaptions,
   VerticalBorders,
   VerticalHeaders,
+  WithControls,
   WithFloatingScroll,
   WithLoader,
   WithSortFilters,