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

package/cjs/navigation/NavList/NavListItemAction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/navigation/NavList/NavListItemAction.tsx"],
+  "sourcesContent": ["export * from '@digigov/react-core/NavListItemActionBase';\nimport React, { ForwardedRef } from 'react';\nimport {\n  NavListItemButton,\n  NavListItemButtonProps,\n  NavListItemBadge,\n  NavListItemActionContainer,\n} from '@digigov/ui/navigation/NavList';\nimport {\n  NavListItemLink,\n  NavListItemLinkProps,\n} from '@digigov/ui/navigation/NavList/NavListItemLink';\n\nexport type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;\nexport interface NavListItemActionBaseProps extends LinkButtonJoinProps {\n  /**\n   * label is optional.\n   * The label for the NavListItemActionBase.\n   */\n  label?: string;\n\n  /**\n   * arrow is optional.\n   * use arrow prop if you want to have arrow at the nav list item.\n   * @value true\n   * @value false\n   * @default false\n   */\n  arrow?: boolean;\n  badgeText?: string;\n}\n/**\n * NavListItemAction must be inside the NavList.\n * This component has a items of NavListItemLink component inside.\n */\nexport const NavListItemAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  NavListItemActionBaseProps\n>(function NavListItemAction(\n  { label, arrow = false, href, className, children, ...props },\n  ref\n) {\n  return (\n    <NavListItemActionContainer>\n      {href ? (\n        <NavListItemLink\n          {...props}\n          href={href}\n          className={className}\n          ref={ref as ForwardedRef<HTMLAnchorElement>}\n        >\n          {children || label}\n        </NavListItemLink>\n      ) : (\n        <NavListItemButton\n          {...props}\n          arrow={arrow}\n          className={className}\n          ref={ref as ForwardedRef<HTMLButtonElement>}\n        >\n          {children || label}\n        </NavListItemButton>\n      )}\n      {props.badgeText && <NavListItemBadge text={props.badgeText} />}\n    </NavListItemActionContainer>\n  );\n});\n\nexport default NavListItemAction;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAc,sDAAd;AACA,mBAAoC;AACpC,qBAKO;AACP,6BAGO;AAwBA,MAAM,oBAAoB,aAAAA,QAAM,WAGrC,SAASC,mBACT,EAAE,OAAO,QAAQ,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAC5D,KACA;AACA,SACE,6BAAAD,QAAA,cAAC,iDACE,OACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEC,YAAY;AAAA,EACf,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEC,YAAY;AAAA,EACf,GAED,MAAM,aAAa,6BAAAA,QAAA,cAAC,mCAAiB,MAAM,MAAM,WAAW,CAC/D;AAEJ,CAAC;AAED,IAAO,4BAAQ;",
+  "names": ["React", "NavListItemAction"]
+}

package/cjs/navigation/NavList/NavListItemLink/index.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NavListItemLink_exports = {};
+__export(NavListItemLink_exports, {
+  NavListItemLink: () => NavListItemLink,
+  default: () => NavListItemLink_default
+});
+module.exports = __toCommonJS(NavListItemLink_exports);
+__reExport(NavListItemLink_exports, require("@digigov/react-core/NavListItemLinkBase"), module.exports);
+var import_react = __toESM(require("react"));
+var import_NavListItemLinkBase = require("@digigov/react-core/NavListItemLinkBase");
+var import_Link = require("@digigov/ui/navigation/Link");
+const NavListItemLink = import_react.default.forwardRef(function NavListItemLink2({ children, ...props }, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_NavListItemLinkBase.NavListItemLinkBase, { as: import_Link.Link, ref, ...props }, children);
+});
+var NavListItemLink_default = NavListItemLink;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavListItemLink,
+  ...require("@digigov/react-core/NavListItemLinkBase")
+});
+//# sourceMappingURL=NavListItemLink.js.map

package/cjs/navigation/NavList/NavListItemLink.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/navigation/NavList/NavListItemLink.tsx"],
+  "sourcesContent": ["export * from '@digigov/react-core/NavListItemLinkBase';\nimport React from 'react';\nimport {\n  NavListItemLinkBase,\n  NavListItemLinkBaseProps,\n} from '@digigov/react-core/NavListItemLinkBase';\nimport { Link } from '@digigov/ui/navigation/Link';\n\nexport interface NavListItemLinkProps extends NavListItemLinkBaseProps {}\n\nexport const NavListItemLink = React.forwardRef<\n  HTMLAnchorElement,\n  NavListItemLinkProps\n>(function NavListItemLink({ children, ...props }, ref) {\n  return (\n    <NavListItemLinkBase as={Link} ref={ref} {...props}>\n      {children}\n    </NavListItemLinkBase>\n  );\n});\n\nexport default NavListItemLink;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAc,oDAAd;AACA,mBAAkB;AAClB,iCAGO;AACP,kBAAqB;AAId,MAAM,kBAAkB,aAAAA,QAAM,WAGnC,SAASC,iBAAgB,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AACtD,SACE,6BAAAD,QAAA,cAAC,kDAAoB,IAAI,kBAAM,KAAW,GAAG,SAC1C,QACH;AAEJ,CAAC;AAED,IAAO,0BAAQ;",
+  "names": ["React", "NavListItemLink"]
+}

package/cjs/navigation/NavList/__stories__/Default/index.js

@@ -35,19 +35,19 @@ var import_react = __toESM(require("react"));
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
+    name: "home",
+    href: "#home",
+    label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
   },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "href": "#educational"
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    href: "#educational"
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "\u039D\u03AD\u03B1"
+    name: "news",
+    href: "#news",
+    label: "\u039D\u03AD\u03B1"
   }
 ];
 const Default = () => {

package/cjs/navigation/NavList/__stories__/Default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/Default.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    \"name\": \"home\",\n    \"href\": \"#home\",\n    \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\"\n  },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"href\": \"#educational\"\n  },\n  {\n    \"name\": \"news\",\n    \"href\": \"#news\",\n    \"label\": \"\u039D\u03AD\u03B1\"\n  }\n]\n\nexport const Default = () => {\n  const { registerNavItem } = useNavList();\n  const [useActive, setUseActive] = useState('');\n\n  return (\n    <Nav\n      aria-orientation=\"horizontal\"\n      role=\"menubar\"\n      aria-label=\"navigation list\"\n    >\n      <NavList>\n        {links.map((item, key) => (\n          <NavListItemAction\n            {...registerNavItem(item)}\n            key={key}\n            active={item.name === useActive}\n            onClick={() => setUseActive(item.name)}\n          >\n            {item.label}\n          </NavListItemAction>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default Default;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAKO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAEO,MAAM,UAAU,MAAM;AAC3B,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,8BACE,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA,QAAQ,KAAK,SAAS;AAAA,QACtB,SAAS,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,MAEpC,KAAK;AAAA,IACR,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;",
+  "sourcesContent": ["import React, { useState } from 'react';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    name: 'home',\n    href: '#home',\n    label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE',\n  },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    href: '#educational',\n  },\n  {\n    name: 'news',\n    href: '#news',\n    label: '\u039D\u03AD\u03B1',\n  },\n];\n\nexport const Default = () => {\n  const { registerNavItem } = useNavList();\n  const [useActive, setUseActive] = useState('');\n\n  return (\n    <Nav\n      aria-orientation=\"horizontal\"\n      role=\"menubar\"\n      aria-label=\"navigation list\"\n    >\n      <NavList>\n        {links.map((item, key) => (\n          <NavListItemAction\n            {...registerNavItem(item)}\n            key={key}\n            active={item.name === useActive}\n            onClick={() => setUseActive(item.name)}\n          >\n            {item.label}\n          </NavListItemAction>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default Default;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAKO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,UAAU,MAAM;AAC3B,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,8BACE,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA,QAAQ,KAAK,SAAS;AAAA,QACtB,SAAS,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,MAEpC,KAAK;AAAA,IACR,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;",
   "names": ["React"]
 }

package/cjs/navigation/NavList/__stories__/HorizontalWithDrawer/index.js

@@ -38,40 +38,40 @@ var import_Button = require("@digigov/ui/form/Button");
 var import_Link = require("@digigov/ui/navigation/Link");
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
-  { "name": "home", "href": "#home", "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
+  { name: "home", href: "#home", label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenuHeading": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenu": [
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenuHeading: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
+        name: "elearning",
+        href: "#elearning",
+        label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
+        name: "videos",
+        href: "#videos",
+        label: "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
+        name: "presentations",
+        href: "#presentations",
+        label: "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
+        name: "promoting",
+        href: "#promoting",
+        label: "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
+        name: "other-texts",
+        href: "#other-texts",
+        label: "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
       }
     ]
   },
-  { "name": "news", "href": "#news", "label": "\u039D\u03AD\u03B1" }
+  { name: "news", href: "#news", label: "\u039D\u03AD\u03B1" }
 ];
 const HorizontalWithDrawer = () => {
   const layout = "horizontal";

package/cjs/navigation/NavList/__stories__/HorizontalWithDrawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/HorizontalWithDrawer.tsx"],
-  "sourcesContent": ["import React, { Fragment, useState } from 'react';\nimport CloseButton from '@digigov/react-core/CloseButton';\nimport BurgerIcon from '@digigov/react-icons/BurgerIcon';\nimport { Button } from '@digigov/ui/form/Button';\nimport { Link } from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { \"name\": \"home\", \"href\": \"#home\", \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\" },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenuHeading\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenu\": [\n      {\n        \"name\": \"elearning\",\n        \"href\": \"#elearning\",\n        \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1\"\n      },\n      {\n        \"name\": \"videos\",\n        \"href\": \"#videos\",\n        \"label\": \"\u0392\u03AF\u03BD\u03C4\u03B5\u03BF\"\n      },\n      {\n        \"name\": \"presentations\",\n        \"href\": \"#presentations\",\n        \"label\": \"\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2\"\n      },\n      {\n        \"name\": \"promoting\",\n        \"href\": \"#promoting\",\n        \"label\": \"\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC\"\n      },\n      {\n        \"name\": \"other-texts\",\n        \"href\": \"#other-texts\",\n        \"label\": \"\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1\"\n      }\n    ]\n  },\n  { \"name\": \"news\", \"href\": \"#news\", \"label\": \"\u039D\u03AD\u03B1\" }\n]\n\nexport const HorizontalWithDrawer = () => {\n  const layout = 'horizontal';\n  const drawer = 'mdDown';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button color=\"secondary\" onClick={() => setOpen(!open)} mdUpHidden>\n        \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 <BurgerIcon />\n      </Button>\n      <Nav\n        border={border}\n        aria-orientation={layout || 'horizontal'}\n        aria-label=\"navigation list\"\n        open={open}\n        drawer={drawer}\n      >\n        <CloseButton mdUpHidden onClick={() => setOpen(false)}>\n          \u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF\n        </CloseButton>\n        <NavList layout={layout}>\n          {links.map((item, key) => (\n            <Fragment key={key}>\n              <NavListItemAction {...registerNavItem(item)}>\n                {item.label}\n              </NavListItemAction>\n              {item.subMenu && (\n                <NavMenuContainer\n                  layout={layout}\n                  {...registerNavItemMenu(item.name)}\n                >\n                  <NavMenuTitle>{item.label}</NavMenuTitle>\n                  <NavMenuContent>\n                    <NavMenuContentList role=\"menu\">\n                      {item.subMenu?.map((subMenu, menuIndex) => {\n                        return (\n                          subMenu?.href && (\n                            <NavMenuContentListItem\n                              key={menuIndex}\n                              role=\"presentation\"\n                            >\n                              <Link\n                                role=\"menuitem\"\n                                id={subMenu.name}\n                                href={subMenu.href}\n                              >\n                                {subMenu.label}\n                              </Link>\n                            </NavMenuContentListItem>\n                          )\n                        );\n                      })}\n                    </NavMenuContentList>\n                  </NavMenuContent>\n                </NavMenuContainer>\n              )}\n            </Fragment>\n          ))}\n        </NavList>\n      </Nav>\n    </>\n  );\n};\n\nexport default HorizontalWithDrawer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAC1C,yBAAwB;AACxB,wBAAuB;AACvB,oBAAuB;AACvB,kBAAqB;AACrB,qBAUO;AAEP,MAAM,QAAQ;AAAA,EACZ,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,uCAAS;AAAA,EACrD;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,kBAAkB;AAAA,IAClB,WAAW;AAAA,MACT;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,qBAAM;AACpD;AAEO,MAAM,uBAAuB,MAAM;AACxC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,2BAAW;AAC5D,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,wBAAO,OAAM,aAAY,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,YAAU,QAAC,qDACzD,6BAAAA,QAAA,cAAC,kBAAAC,SAAA,IAAW,CACvB,GACA,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA,MACX;AAAA,MACA;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,mBAAAE,SAAA,EAAY,YAAU,MAAC,SAAS,MAAM,QAAQ,KAAK,KAAG,kDAEvD;AAAA,IACA,6BAAAF,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,yBAAS,OACR,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,+BAAQ;",
+  "sourcesContent": ["import React, { Fragment, useState } from 'react';\nimport CloseButton from '@digigov/react-core/CloseButton';\nimport BurgerIcon from '@digigov/react-icons/BurgerIcon';\nimport { Button } from '@digigov/ui/form/Button';\nimport { Link } from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { name: 'home', href: '#home', label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE' },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenuHeading: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenu: [\n      {\n        name: 'elearning',\n        href: '#elearning',\n        label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1',\n      },\n      {\n        name: 'videos',\n        href: '#videos',\n        label: '\u0392\u03AF\u03BD\u03C4\u03B5\u03BF',\n      },\n      {\n        name: 'presentations',\n        href: '#presentations',\n        label: '\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2',\n      },\n      {\n        name: 'promoting',\n        href: '#promoting',\n        label: '\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC',\n      },\n      {\n        name: 'other-texts',\n        href: '#other-texts',\n        label: '\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1',\n      },\n    ],\n  },\n  { name: 'news', href: '#news', label: '\u039D\u03AD\u03B1' },\n];\n\nexport const HorizontalWithDrawer = () => {\n  const layout = 'horizontal';\n  const drawer = 'mdDown';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button color=\"secondary\" onClick={() => setOpen(!open)} mdUpHidden>\n        \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 <BurgerIcon />\n      </Button>\n      <Nav\n        border={border}\n        aria-orientation={layout || 'horizontal'}\n        aria-label=\"navigation list\"\n        open={open}\n        drawer={drawer}\n      >\n        <CloseButton mdUpHidden onClick={() => setOpen(false)}>\n          \u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF\n        </CloseButton>\n        <NavList layout={layout}>\n          {links.map((item, key) => (\n            <Fragment key={key}>\n              <NavListItemAction {...registerNavItem(item)}>\n                {item.label}\n              </NavListItemAction>\n              {item.subMenu && (\n                <NavMenuContainer\n                  layout={layout}\n                  {...registerNavItemMenu(item.name)}\n                >\n                  <NavMenuTitle>{item.label}</NavMenuTitle>\n                  <NavMenuContent>\n                    <NavMenuContentList role=\"menu\">\n                      {item.subMenu?.map((subMenu, menuIndex) => {\n                        return (\n                          subMenu?.href && (\n                            <NavMenuContentListItem\n                              key={menuIndex}\n                              role=\"presentation\"\n                            >\n                              <Link\n                                role=\"menuitem\"\n                                id={subMenu.name}\n                                href={subMenu.href}\n                              >\n                                {subMenu.label}\n                              </Link>\n                            </NavMenuContentListItem>\n                          )\n                        );\n                      })}\n                    </NavMenuContentList>\n                  </NavMenuContent>\n                </NavMenuContainer>\n              )}\n            </Fragment>\n          ))}\n        </NavList>\n      </Nav>\n    </>\n  );\n};\n\nexport default HorizontalWithDrawer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAC1C,yBAAwB;AACxB,wBAAuB;AACvB,oBAAuB;AACvB,kBAAqB;AACrB,qBAUO;AAEP,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,uCAAS;AAAA,EAC/C;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,qBAAM;AAC9C;AAEO,MAAM,uBAAuB,MAAM;AACxC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,2BAAW;AAC5D,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,wBAAO,OAAM,aAAY,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,YAAU,QAAC,qDACzD,6BAAAA,QAAA,cAAC,kBAAAC,SAAA,IAAW,CACvB,GACA,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA,MACX;AAAA,MACA;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,mBAAAE,SAAA,EAAY,YAAU,MAAC,SAAS,MAAM,QAAQ,KAAK,KAAG,kDAEvD;AAAA,IACA,6BAAAF,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,yBAAS,OACR,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,+BAAQ;",
   "names": ["React", "BurgerIcon", "CloseButton"]
 }

package/cjs/navigation/NavList/__stories__/HorizontalWithoutDrawer/index.js

@@ -35,40 +35,40 @@ var import_react = __toESM(require("react"));
 var import_Link = require("@digigov/ui/navigation/Link");
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
-  { "name": "home", "href": "#home", "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
+  { name: "home", href: "#home", label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenuHeading": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenu": [
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenuHeading: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
+        name: "elearning",
+        href: "#elearning",
+        label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
+        name: "videos",
+        href: "#videos",
+        label: "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
+        name: "presentations",
+        href: "#presentations",
+        label: "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
+        name: "promoting",
+        href: "#promoting",
+        label: "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
+        name: "other-texts",
+        href: "#other-texts",
+        label: "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
       }
     ]
   },
-  { "name": "news", "href": "#news", "label": "\u039D\u03AD\u03B1" }
+  { name: "news", href: "#news", label: "\u039D\u03AD\u03B1" }
 ];
 const HorizontalWithoutDrawer = () => {
   const layout = "horizontal";

package/cjs/navigation/NavList/__stories__/HorizontalWithoutDrawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx"],
-  "sourcesContent": ["import React, { Fragment } from 'react';\nimport { Link } from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { \"name\": \"home\", \"href\": \"#home\", \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\" },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenuHeading\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenu\": [\n      {\n        \"name\": \"elearning\",\n        \"href\": \"#elearning\",\n        \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1\"\n      },\n      {\n        \"name\": \"videos\",\n        \"href\": \"#videos\",\n        \"label\": \"\u0392\u03AF\u03BD\u03C4\u03B5\u03BF\"\n      },\n      {\n        \"name\": \"presentations\",\n        \"href\": \"#presentations\",\n        \"label\": \"\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2\"\n      },\n      {\n        \"name\": \"promoting\",\n        \"href\": \"#promoting\",\n        \"label\": \"\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC\"\n      },\n      {\n        \"name\": \"other-texts\",\n        \"href\": \"#other-texts\",\n        \"label\": \"\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1\"\n      }\n    ]\n  },\n  { \"name\": \"news\", \"href\": \"#news\", \"label\": \"\u039D\u03AD\u03B1\" }\n]\n\nexport const HorizontalWithoutDrawer = () => {\n  const layout = 'horizontal';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n  return (\n    <Nav\n      border={border}\n      aria-orientation={layout || 'horizontal'}\n      aria-label=\"navigation list\"\n    >\n      <NavList layout={layout}>\n        {links.map((item, key) => (\n          <Fragment key={key}>\n            <NavListItemAction {...registerNavItem(item)}>\n              {item.label}\n            </NavListItemAction>\n            {item.subMenu && (\n              <NavMenuContainer\n                layout={layout}\n                {...registerNavItemMenu(item.name)}\n              >\n                <NavMenuTitle>{item.label}</NavMenuTitle>\n                <NavMenuContent>\n                  <NavMenuContentList role=\"menu\">\n                    {item.subMenu?.map((subMenu, menuIndex) => {\n                      return (\n                        subMenu?.href && (\n                          <NavMenuContentListItem\n                            key={menuIndex}\n                            role=\"presentation\"\n                          >\n                            <Link\n                              role=\"menuitem\"\n                              id={subMenu.name}\n                              href={subMenu.href}\n                            >\n                              {subMenu.label}\n                            </Link>\n                          </NavMenuContentListItem>\n                        )\n                      );\n                    })}\n                  </NavMenuContentList>\n                </NavMenuContent>\n              </NavMenuContainer>\n            )}\n          </Fragment>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default HorizontalWithoutDrawer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,kBAAqB;AACrB,qBAUO;AAEP,MAAM,QAAQ;AAAA,EACZ,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,uCAAS;AAAA,EACrD;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,kBAAkB;AAAA,IAClB,WAAW;AAAA,MACT;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,qBAAM;AACpD;AAEO,MAAM,0BAA0B,MAAM;AAC3C,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,2BAAW;AAC5D,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,yBAAS,OACR,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,kCAAQ;",
+  "sourcesContent": ["import React, { Fragment } from 'react';\nimport { Link } from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { name: 'home', href: '#home', label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE' },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenuHeading: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenu: [\n      {\n        name: 'elearning',\n        href: '#elearning',\n        label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1',\n      },\n      {\n        name: 'videos',\n        href: '#videos',\n        label: '\u0392\u03AF\u03BD\u03C4\u03B5\u03BF',\n      },\n      {\n        name: 'presentations',\n        href: '#presentations',\n        label: '\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2',\n      },\n      {\n        name: 'promoting',\n        href: '#promoting',\n        label: '\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC',\n      },\n      {\n        name: 'other-texts',\n        href: '#other-texts',\n        label: '\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1',\n      },\n    ],\n  },\n  { name: 'news', href: '#news', label: '\u039D\u03AD\u03B1' },\n];\n\nexport const HorizontalWithoutDrawer = () => {\n  const layout = 'horizontal';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n  return (\n    <Nav\n      border={border}\n      aria-orientation={layout || 'horizontal'}\n      aria-label=\"navigation list\"\n    >\n      <NavList layout={layout}>\n        {links.map((item, key) => (\n          <Fragment key={key}>\n            <NavListItemAction {...registerNavItem(item)}>\n              {item.label}\n            </NavListItemAction>\n            {item.subMenu && (\n              <NavMenuContainer\n                layout={layout}\n                {...registerNavItemMenu(item.name)}\n              >\n                <NavMenuTitle>{item.label}</NavMenuTitle>\n                <NavMenuContent>\n                  <NavMenuContentList role=\"menu\">\n                    {item.subMenu?.map((subMenu, menuIndex) => {\n                      return (\n                        subMenu?.href && (\n                          <NavMenuContentListItem\n                            key={menuIndex}\n                            role=\"presentation\"\n                          >\n                            <Link\n                              role=\"menuitem\"\n                              id={subMenu.name}\n                              href={subMenu.href}\n                            >\n                              {subMenu.label}\n                            </Link>\n                          </NavMenuContentListItem>\n                        )\n                      );\n                    })}\n                  </NavMenuContentList>\n                </NavMenuContent>\n              </NavMenuContainer>\n            )}\n          </Fragment>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default HorizontalWithoutDrawer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,kBAAqB;AACrB,qBAUO;AAEP,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,uCAAS;AAAA,EAC/C;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,qBAAM;AAC9C;AAEO,MAAM,0BAA0B,MAAM;AAC3C,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,2BAAW;AAC5D,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,yBAAS,OACR,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,kCAAQ;",
   "names": ["React"]
 }

package/cjs/navigation/NavList/__stories__/NavListWithoutNav/index.js

@@ -35,19 +35,19 @@ var import_react = __toESM(require("react"));
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
+    name: "home",
+    href: "#home",
+    label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
   },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "href": "#educational"
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    href: "#educational"
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "\u039D\u03AD\u03B1"
+    name: "news",
+    href: "#news",
+    label: "\u039D\u03AD\u03B1"
   }
 ];
 const NavListWithoutNav = () => {

package/cjs/navigation/NavList/__stories__/NavListWithoutNav.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/NavListWithoutNav.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport {\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    \"name\": \"home\",\n    \"href\": \"#home\",\n    \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\"\n  },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"href\": \"#educational\"\n  },\n  {\n    \"name\": \"news\",\n    \"href\": \"#news\",\n    \"label\": \"\u039D\u03AD\u03B1\"\n  }\n]\n\nexport const NavListWithoutNav = () => {\n  const layout = 'vertical';\n  const { registerNavItem } = useNavList();\n\n  return (\n    <NavList layout={layout}>\n      {links.map((item, key) => (\n        <NavListItemAction {...registerNavItem(item)} key={key}>\n          {item.label}\n        </NavListItemAction>\n      ))}\n    </NavList>\n  );\n};\n\nexport default NavListWithoutNav;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAIO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAEO,MAAM,oBAAoB,MAAM;AACrC,QAAM,SAAS;AACf,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AAEvC,SACE,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,GAAG,OAC3C,KAAK,KACR,CACD,CACH;AAEJ;AAEA,IAAO,4BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport {\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    name: 'home',\n    href: '#home',\n    label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE',\n  },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    href: '#educational',\n  },\n  {\n    name: 'news',\n    href: '#news',\n    label: '\u039D\u03AD\u03B1',\n  },\n];\n\nexport const NavListWithoutNav = () => {\n  const layout = 'vertical';\n  const { registerNavItem } = useNavList();\n\n  return (\n    <NavList layout={layout}>\n      {links.map((item, key) => (\n        <NavListItemAction {...registerNavItem(item)} key={key}>\n          {item.label}\n        </NavListItemAction>\n      ))}\n    </NavList>\n  );\n};\n\nexport default NavListWithoutNav;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAIO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAoB,MAAM;AACrC,QAAM,SAAS;AACf,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AAEvC,SACE,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,GAAG,OAC3C,KAAK,KACR,CACD,CACH;AAEJ;AAEA,IAAO,4BAAQ;",
   "names": ["React"]
 }

package/cjs/navigation/NavList/__stories__/UsingNavListAuto/index.js

@@ -32,8 +32,8 @@ __export(UsingNavListAuto_exports, {
 });
 module.exports = __toCommonJS(UsingNavListAuto_exports);
 var import_react = __toESM(require("react"));
-var import_SvgIcon = __toESM(require("@digigov/ui/utils/SvgIcon"));
 var import_Button = require("@digigov/ui/form/Button");
+var import_icons = require("@digigov/ui/icons");
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
   { name: "home", href: "#home", label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
@@ -76,7 +76,7 @@ const UsingNavListAuto = () => {
   const drawer = "smDown";
   const border = true;
   const [open, setOpen] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { color: "secondary", onClick: () => setOpen(!open), smUpHidden: true }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", /* @__PURE__ */ import_react.default.createElement(import_SvgIcon.default, null)), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { color: "secondary", onClick: () => setOpen(!open), smUpHidden: true }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", /* @__PURE__ */ import_react.default.createElement(import_icons.BurgerIcon, null)), /* @__PURE__ */ import_react.default.createElement(
     import_NavList.NavListAuto,
     {
       layout,

package/cjs/navigation/NavList/__stories__/UsingNavListAuto.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/UsingNavListAuto.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport BurgerIcon from '@digigov/ui/utils/SvgIcon';\nimport { Button } from '@digigov/ui/form/Button';\nimport { NavListAuto } from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { name: 'home', href: '#home', label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE' },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenuHeading: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenu: [\n      {\n        name: 'elearning',\n        href: '#elearning',\n        label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1',\n      },\n      {\n        name: 'videos',\n        href: '#videos',\n        label: '\u0392\u03AF\u03BD\u03C4\u03B5\u03BF',\n      },\n      {\n        name: 'presentations',\n        href: '#presentations',\n        label: '\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2',\n      },\n      {\n        name: 'promoting',\n        href: '#promoting',\n        label: '\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC',\n      },\n      {\n        name: 'other-texts',\n        href: '#other-texts',\n        label: '\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1',\n      },\n    ],\n  },\n  { name: 'news', href: '#news', label: '\u039D\u03AD\u03B1' },\n];\n\nexport const UsingNavListAuto = () => {\n  const layout = 'horizontal';\n  const drawer = 'smDown';\n  const border = true;\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button color=\"secondary\" onClick={() => setOpen(!open)} smUpHidden>\n        \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 <BurgerIcon />\n      </Button>\n      <NavListAuto\n        layout={layout}\n        border={border}\n        drawer={drawer}\n        open={open}\n        links={links}\n        onClose={() => setOpen(false)}\n        aria-label=\"Nav list\"\n      ></NavListAuto>\n    </>\n  );\n};\n\nexport default UsingNavListAuto;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAAuB;AACvB,oBAAuB;AACvB,qBAA4B;AAE5B,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,uCAAS;AAAA,EAC/C;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,qBAAM;AAC9C;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,wBAAO,OAAM,aAAY,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,YAAU,QAAC,qDACzD,6BAAAA,QAAA,cAAC,eAAAC,SAAA,IAAW,CACvB,GACA,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,cAAW;AAAA;AAAA,EACZ,CACH;AAEJ;AAEA,IAAO,2BAAQ;",
-  "names": ["React", "BurgerIcon"]
+  "sourcesContent": ["import React, { useState } from 'react';\nimport { Button } from '@digigov/ui/form/Button';\nimport { BurgerIcon } from '@digigov/ui/icons';\nimport { NavListAuto } from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  { name: 'home', href: '#home', label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE' },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenuHeading: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenu: [\n      {\n        name: 'elearning',\n        href: '#elearning',\n        label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1',\n      },\n      {\n        name: 'videos',\n        href: '#videos',\n        label: '\u0392\u03AF\u03BD\u03C4\u03B5\u03BF',\n      },\n      {\n        name: 'presentations',\n        href: '#presentations',\n        label: '\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2',\n      },\n      {\n        name: 'promoting',\n        href: '#promoting',\n        label: '\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC',\n      },\n      {\n        name: 'other-texts',\n        href: '#other-texts',\n        label: '\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1',\n      },\n    ],\n  },\n  { name: 'news', href: '#news', label: '\u039D\u03AD\u03B1' },\n];\n\nexport const UsingNavListAuto = () => {\n  const layout = 'horizontal';\n  const drawer = 'smDown';\n  const border = true;\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button color=\"secondary\" onClick={() => setOpen(!open)} smUpHidden>\n        \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 <BurgerIcon />\n      </Button>\n      <NavListAuto\n        layout={layout}\n        border={border}\n        drawer={drawer}\n        open={open}\n        links={links}\n        onClose={() => setOpen(false)}\n        aria-label=\"Nav list\"\n      ></NavListAuto>\n    </>\n  );\n};\n\nexport default UsingNavListAuto;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,oBAAuB;AACvB,mBAA2B;AAC3B,qBAA4B;AAE5B,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,uCAAS;AAAA,EAC/C;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,qBAAM;AAC9C;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,wBAAO,OAAM,aAAY,SAAS,MAAM,QAAQ,CAAC,IAAI,GAAG,YAAU,QAAC,qDACzD,6BAAAA,QAAA,cAAC,6BAAW,CACvB,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,cAAW;AAAA;AAAA,EACZ,CACH;AAEJ;AAEA,IAAO,2BAAQ;",
+  "names": ["React"]
 }

package/cjs/navigation/NavList/__stories__/VerticalWithoutDrawer/index.js

@@ -36,40 +36,40 @@ var import_Link = __toESM(require("@digigov/ui/navigation/Link"));
 var import_NavList = require("@digigov/ui/navigation/NavList");
 var import_useNavList = require("@digigov/ui/navigation/NavList/hooks/useNavList");
 const links = [
-  { "name": "home", "href": "#home", "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
+  { name: "home", href: "#home", label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE" },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenuHeading": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "subMenu": [
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenuHeading: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
+        name: "elearning",
+        href: "#elearning",
+        label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1"
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
+        name: "videos",
+        href: "#videos",
+        label: "\u0392\u03AF\u03BD\u03C4\u03B5\u03BF"
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
+        name: "presentations",
+        href: "#presentations",
+        label: "\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2"
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
+        name: "promoting",
+        href: "#promoting",
+        label: "\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC"
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
+        name: "other-texts",
+        href: "#other-texts",
+        label: "\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1"
       }
     ]
   },
-  { "name": "news", "href": "#news", "label": "\u039D\u03AD\u03B1" }
+  { name: "news", href: "#news", label: "\u039D\u03AD\u03B1" }
 ];
 const VerticalWithoutDrawer = () => {
   const layout = "vertical";

package/cjs/navigation/NavList/__stories__/VerticalWithoutDrawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport Link from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n} from '@digigov/ui/navigation/NavList';\nimport { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';\n\nconst links = [\n  { \"name\": \"home\", \"href\": \"#home\", \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\" },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenuHeading\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"subMenu\": [\n      {\n        \"name\": \"elearning\",\n        \"href\": \"#elearning\",\n        \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1\"\n      },\n      {\n        \"name\": \"videos\",\n        \"href\": \"#videos\",\n        \"label\": \"\u0392\u03AF\u03BD\u03C4\u03B5\u03BF\"\n      },\n      {\n        \"name\": \"presentations\",\n        \"href\": \"#presentations\",\n        \"label\": \"\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2\"\n      },\n      {\n        \"name\": \"promoting\",\n        \"href\": \"#promoting\",\n        \"label\": \"\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC\"\n      },\n      {\n        \"name\": \"other-texts\",\n        \"href\": \"#other-texts\",\n        \"label\": \"\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1\"\n      }\n    ]\n  },\n  { \"name\": \"news\", \"href\": \"#news\", \"label\": \"\u039D\u03AD\u03B1\" }\n]\n\nexport const VerticalWithoutDrawer = () => {\n  const layout = 'vertical';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n\n  return (\n    <Nav\n      border={border}\n      aria-orientation={layout || 'horizontal'}\n      aria-label=\"navigation list\"\n    >\n      <NavList layout={layout}>\n        {links.map((item, key) => (\n          <React.Fragment key={key}>\n            <NavListItemAction {...registerNavItem(item)}>\n              {item.label}\n            </NavListItemAction>\n            {item.subMenu && (\n              <NavMenuContainer\n                layout={layout}\n                paddingLeft={5}\n                paddingRight={5}\n                {...registerNavItemMenu(item.name)}\n              >\n                <NavMenuTitle>{item.label}</NavMenuTitle>\n                <NavMenuContent>\n                  <NavMenuContentList role=\"menu\">\n                    {item.subMenu?.map((subMenu, menuIndex) => {\n                      return (\n                        subMenu?.href && (\n                          <NavMenuContentListItem\n                            key={menuIndex}\n                            role=\"presentation\"\n                          >\n                            <Link\n                              role=\"menuitem\"\n                              id={subMenu.name}\n                              href={subMenu.href}\n                            >\n                              {subMenu.label}\n                            </Link>\n                          </NavMenuContentListItem>\n                        )\n                      );\n                    })}\n                  </NavMenuContentList>\n                </NavMenuContent>\n              </NavMenuContainer>\n            )}\n          </React.Fragment>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default VerticalWithoutDrawer;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,qBASO;AACP,wBAA2B;AAE3B,MAAM,QAAQ;AAAA,EACZ,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,uCAAS;AAAA,EACrD;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,kBAAkB;AAAA,IAClB,WAAW;AAAA,MACT;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,QAAQ,QAAQ,QAAQ,SAAS,SAAS,qBAAM;AACpD;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,8BAAW;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,OACd,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,cAAc;AAAA,QACb,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC,YAAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,gCAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport Link from '@digigov/ui/navigation/Link';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  NavMenuContainer,\n  NavMenuContent,\n  NavMenuContentList,\n  NavMenuContentListItem,\n  NavMenuTitle,\n} from '@digigov/ui/navigation/NavList';\nimport { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';\n\nconst links = [\n  { name: 'home', href: '#home', label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE' },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenuHeading: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    subMenu: [\n      {\n        name: 'elearning',\n        href: '#elearning',\n        label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03AE \u03C0\u03BB\u03B1\u03C4\u03C6\u03CC\u03C1\u03BC\u03B1',\n      },\n      {\n        name: 'videos',\n        href: '#videos',\n        label: '\u0392\u03AF\u03BD\u03C4\u03B5\u03BF',\n      },\n      {\n        name: 'presentations',\n        href: '#presentations',\n        label: '\u03A0\u03B1\u03C1\u03BF\u03C5\u03C3\u03B9\u03AC\u03C3\u03B5\u03B9\u03C2',\n      },\n      {\n        name: 'promoting',\n        href: '#promoting',\n        label: '\u03A0\u03C1\u03BF\u03C9\u03B8\u03CE\u03BD\u03C4\u03B1\u03C2 \u03C4\u03B7\u03BD \u03B1\u03B8\u03BB\u03B7\u03C4\u03B9\u03BA\u03AE \u03B1\u03BA\u03B5\u03C1\u03B1\u03B9\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03C4\u03B7\u03BD \u03BD\u03AD\u03B1 \u03B3\u03B5\u03BD\u03B9\u03AC',\n      },\n      {\n        name: 'other-texts',\n        href: '#other-texts',\n        label: '\u0386\u03BB\u03BB\u03B1 \u03BA\u03B5\u03AF\u03BC\u03B5\u03BD\u03B1',\n      },\n    ],\n  },\n  { name: 'news', href: '#news', label: '\u039D\u03AD\u03B1' },\n];\n\nexport const VerticalWithoutDrawer = () => {\n  const layout = 'vertical';\n  const border = false;\n  const { registerNavItemMenu, registerNavItem } = useNavList();\n\n  return (\n    <Nav\n      border={border}\n      aria-orientation={layout || 'horizontal'}\n      aria-label=\"navigation list\"\n    >\n      <NavList layout={layout}>\n        {links.map((item, key) => (\n          <React.Fragment key={key}>\n            <NavListItemAction {...registerNavItem(item)}>\n              {item.label}\n            </NavListItemAction>\n            {item.subMenu && (\n              <NavMenuContainer\n                layout={layout}\n                paddingLeft={5}\n                paddingRight={5}\n                {...registerNavItemMenu(item.name)}\n              >\n                <NavMenuTitle>{item.label}</NavMenuTitle>\n                <NavMenuContent>\n                  <NavMenuContentList role=\"menu\">\n                    {item.subMenu?.map((subMenu, menuIndex) => {\n                      return (\n                        subMenu?.href && (\n                          <NavMenuContentListItem\n                            key={menuIndex}\n                            role=\"presentation\"\n                          >\n                            <Link\n                              role=\"menuitem\"\n                              id={subMenu.name}\n                              href={subMenu.href}\n                            >\n                              {subMenu.label}\n                            </Link>\n                          </NavMenuContentListItem>\n                        )\n                      );\n                    })}\n                  </NavMenuContentList>\n                </NavMenuContent>\n              </NavMenuContainer>\n            )}\n          </React.Fragment>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default VerticalWithoutDrawer;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,qBASO;AACP,wBAA2B;AAE3B,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,uCAAS;AAAA,EAC/C;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAAA,EACA,EAAE,MAAM,QAAQ,MAAM,SAAS,OAAO,qBAAM;AAC9C;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,SAAS;AACf,QAAM,SAAS;AACf,QAAM,EAAE,qBAAqB,gBAAgB,QAAI,8BAAW;AAE5D,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB,UAAU;AAAA,MAC5B,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,0BAAQ,UACN,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,OACd,6BAAAA,QAAA,cAAC,oCAAmB,GAAG,gBAAgB,IAAI,KACxC,KAAK,KACR,GACC,KAAK,WACJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,cAAc;AAAA,QACb,GAAG,oBAAoB,KAAK,IAAI;AAAA;AAAA,MAEjC,6BAAAA,QAAA,cAAC,mCAAc,KAAK,KAAM;AAAA,MAC1B,6BAAAA,QAAA,cAAC,qCACC,6BAAAA,QAAA,cAAC,qCAAmB,MAAK,UACtB,KAAK,SAAS,IAAI,CAAC,SAAS,cAAc;AACzC,eACE,SAAS,QACP,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,UAEL,6BAAAA,QAAA;AAAA,YAAC,YAAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,MAAM,QAAQ;AAAA;AAAA,YAEb,QAAQ;AAAA,UACX;AAAA,QACF;AAAA,MAGN,CAAC,CACH,CACF;AAAA,IACF,CAEJ,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,gCAAQ;",
   "names": ["React", "Link"]
 }

package/cjs/navigation/NavList/__stories__/WithBadge/index.js

@@ -35,20 +35,20 @@ var import_react = __toESM(require("react"));
 var import_NavList = require("@digigov/ui/navigation/NavList");
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
+    name: "home",
+    href: "#home",
+    label: "\u0391\u03C1\u03C7\u03B9\u03BA\u03AE"
   },
   {
-    "name": "educational",
-    "label": "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
-    "href": "#educational"
+    name: "educational",
+    label: "\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC",
+    href: "#educational"
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "\u039D\u03AD\u03B1",
-    "badge": "2"
+    name: "news",
+    href: "#news",
+    label: "\u039D\u03AD\u03B1",
+    badge: "2"
   }
 ];
 const WithBadge = () => {

package/cjs/navigation/NavList/__stories__/WithBadge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/navigation/NavList/__stories__/WithBadge.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    \"name\": \"home\",\n    \"href\": \"#home\",\n    \"label\": \"\u0391\u03C1\u03C7\u03B9\u03BA\u03AE\"\n  },\n  {\n    \"name\": \"educational\",\n    \"label\": \"\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC\",\n    \"href\": \"#educational\"\n  },\n  {\n    \"name\": \"news\",\n    \"href\": \"#news\",\n    \"label\": \"\u039D\u03AD\u03B1\",\n    \"badge\": \"2\"\n  }\n]\n\nexport const WithBadge = () => {\n  const { registerNavItem } = useNavList();\n  const [useActive, setUseActive] = useState('');\n\n  return (\n    <Nav\n      aria-orientation=\"horizontal\"\n      role=\"menubar\"\n      aria-label=\"navigation list\"\n    >\n      <NavList>\n        {links.map((item, key) => (\n          <NavListItemAction\n            {...registerNavItem(item)}\n            badgeText={item.badge}\n            key={key}\n            active={item.name === useActive}\n            onClick={() => setUseActive(item.name)}\n          >\n            {item.label}\n          </NavListItemAction>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default WithBadge;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAKO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,8BACE,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,gBAAgB,IAAI;AAAA,QACxB,WAAW,KAAK;AAAA,QAChB;AAAA,QACA,QAAQ,KAAK,SAAS;AAAA,QACtB,SAAS,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,MAEpC,KAAK;AAAA,IACR,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;",
+  "sourcesContent": ["import React, { useState } from 'react';\nimport {\n  Nav,\n  NavList,\n  NavListItemAction,\n  useNavList,\n} from '@digigov/ui/navigation/NavList';\n\nconst links = [\n  {\n    name: 'home',\n    href: '#home',\n    label: '\u0391\u03C1\u03C7\u03B9\u03BA\u03AE',\n  },\n  {\n    name: 'educational',\n    label: '\u0395\u03BA\u03C0\u03B1\u03B9\u03B4\u03B5\u03C5\u03C4\u03B9\u03BA\u03CC \u03C5\u03BB\u03B9\u03BA\u03CC',\n    href: '#educational',\n  },\n  {\n    name: 'news',\n    href: '#news',\n    label: '\u039D\u03AD\u03B1',\n    badge: '2',\n  },\n];\n\nexport const WithBadge = () => {\n  const { registerNavItem } = useNavList();\n  const [useActive, setUseActive] = useState('');\n\n  return (\n    <Nav\n      aria-orientation=\"horizontal\"\n      role=\"menubar\"\n      aria-label=\"navigation list\"\n    >\n      <NavList>\n        {links.map((item, key) => (\n          <NavListItemAction\n            {...registerNavItem(item)}\n            badgeText={item.badge}\n            key={key}\n            active={item.name === useActive}\n            onClick={() => setUseActive(item.name)}\n          >\n            {item.label}\n          </NavListItemAction>\n        ))}\n      </NavList>\n    </Nav>\n  );\n};\n\nexport default WithBadge;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAKO;AAEP,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,gBAAgB,QAAI,2BAAW;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,cAAW;AAAA;AAAA,IAEX,6BAAAA,QAAA,cAAC,8BACE,MAAM,IAAI,CAAC,MAAM,QAChB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,gBAAgB,IAAI;AAAA,QACxB,WAAW,KAAK;AAAA,QAChB;AAAA,QACA,QAAQ,KAAK,SAAS;AAAA,QACtB,SAAS,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,MAEpC,KAAK;AAAA,IACR,CACD,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;",
   "names": ["React"]
 }