@digigov/ui 0.30.2 → 0.31.0

package/hooks/useVariantVars.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function useVariantVars(_ref) {
+  var name = _ref.name,
+      variables = _ref.variables,
+      variants = _ref.variants;
+  var root = document.documentElement;
+  var storedValue = localStorage.getItem("--theme-".concat(name));
+
+  var _useState = (0, _react.useState)(storedValue || variants[0]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    localStorage.setItem("--theme-".concat(name), value);
+    variables.forEach(function (varName) {
+      root.style.setProperty("--".concat(varName), "var(--".concat(varName, "-").concat(value, ")"));
+    });
+  }, [value]);
+
+  function changeValue(v) {
+    setValue(v);
+  }
+
+  return [value, changeValue];
+}
+
+var _default = useVariantVars;
+exports["default"] = _default;

package/layouts/Basic/__stories__/Default.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))));
 
 var Default = function Default() {
   return _ref;

package/layouts/Basic/__stories__/MultipleRowsLayout.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
-var _Side = require("@digigov/ui/layouts/Basic/Side");
+var _Aside = require("@digigov/ui/layouts/Basic/Aside");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))), /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Side.Side, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Aside.Aside, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
   size: "m"
 }, "One-third-column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a one-third wide column"))));
 

package/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
-var _Side = require("@digigov/ui/layouts/Basic/Side");
+var _Aside = require("@digigov/ui/layouts/Basic/Aside");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Side.Side, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Aside.Aside, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
   size: "m"
 }, "One-third-column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a one-third wide column"))));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -20,8 +20,8 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "0.21.0",
-    "@digigov/react-extensions": "0.20.6"
+    "@digigov/react-core": "0.22.0",
+    "@digigov/react-extensions": "0.21.0"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -1,4 +1,5 @@
 declare var _default: {
+    '@digigov/ui/admin/AccessibilityMenu': {};
     '@digigov/ui/admin/AdminLayout': {};
     '@digigov/ui/admin/AutoComplete': {};
     '@digigov/ui/admin/AutoComplete/Status': {};
@@ -56,7 +57,8 @@ declare var _default: {
     '@digigov/ui/app/QrCodeViewer/qrcodegen': {};
     '@digigov/ui/app/QrCodeViewer/types': {};
     '@digigov/ui/app/QrCodeViewer/utils': {};
-    '@digigov/ui/app/ThemeSelectorOptions': {};
+    '@digigov/ui/app/ThemeOptionsForm': {};
+    '@digigov/ui/app/ThemePaletteForm': {};
     '@digigov/ui/core/Accordion': {};
     '@digigov/ui/core/BackLink': {};
     '@digigov/ui/core/Base': {};
@@ -94,15 +96,18 @@ declare var _default: {
     '@digigov/ui/core/NavList': {};
     '@digigov/ui/core/NavList/Nav': {};
     '@digigov/ui/core/NavList/NavList': {};
-    '@digigov/ui/core/NavList/NavListAuto': {};
-    '@digigov/ui/core/NavList/NavListBase': {};
-    '@digigov/ui/core/NavList/NavListContext': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto': {};
     '@digigov/ui/core/NavList/NavListItem': {};
-    '@digigov/ui/core/NavList/NavListItemAuto': {};
     '@digigov/ui/core/NavList/NavListItemBase': {};
     '@digigov/ui/core/NavList/NavListItemButton': {};
     '@digigov/ui/core/NavList/NavListItemLink': {};
-    '@digigov/ui/core/NavList/NavListSubMenu': {};
     '@digigov/ui/core/NavList/NavMenu': {};
     '@digigov/ui/core/NavList/NavMenuContainer': {};
     '@digigov/ui/core/NavList/NavMenuContainerContent': {};
@@ -146,13 +151,19 @@ declare var _default: {
     '@digigov/ui/govgr/images/minedu-logo-black-base64': {};
     '@digigov/ui/govgr': {};
     '@digigov/ui/hooks/useDebounce': {};
+    '@digigov/ui/hooks/useFontSize': {};
+    '@digigov/ui/hooks/useHighlightLinks': {};
     '@digigov/ui/hooks/useKeypress': {};
     '@digigov/ui/hooks/useLatest': {};
+    '@digigov/ui/hooks/useLetterSpacing': {};
+    '@digigov/ui/hooks/useLineHeight': {};
     '@digigov/ui/hooks/useNavList': {};
     '@digigov/ui/hooks/useOutdatedBrowserCheck': {};
     '@digigov/ui/hooks/useSearch': {};
     '@digigov/ui/hooks/useTheme': {};
-    '@digigov/ui/hooks/useTogglableSections': {};
+    '@digigov/ui/hooks/useTogglableNav': {};
+    '@digigov/ui/hooks/useTogglableTab': {};
+    '@digigov/ui/hooks/useVariantVars': {};
     '@digigov/ui': {};
     '@digigov/ui/layouts/Basic/Aside': {};
     '@digigov/ui/layouts/Basic/Bottom': {};

package/registry.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.stories = exports["default"] = void 0;
 
+var _digigov_ui_admin_AccessibilityMenu = _interopRequireWildcard(require("@digigov/ui/admin/AccessibilityMenu"));
+
 var _digigov_ui_admin_AdminLayout = _interopRequireWildcard(require("@digigov/ui/admin/AdminLayout"));
 
 var _digigov_ui_admin_AutoComplete = _interopRequireWildcard(require("@digigov/ui/admin/AutoComplete"));
@@ -121,7 +123,9 @@ var _digigov_ui_app_QrCodeViewer_types = _interopRequireWildcard(require("@digig
 
 var _digigov_ui_app_QrCodeViewer_utils = _interopRequireWildcard(require("@digigov/ui/app/QrCodeViewer/utils"));
 
-var _digigov_ui_app_ThemeSelectorOptions = _interopRequireWildcard(require("@digigov/ui/app/ThemeSelectorOptions"));
+var _digigov_ui_app_ThemeOptionsForm = _interopRequireWildcard(require("@digigov/ui/app/ThemeOptionsForm"));
+
+var _digigov_ui_app_ThemePaletteForm = _interopRequireWildcard(require("@digigov/ui/app/ThemePaletteForm"));
 
 var _digigov_ui_core_Accordion = _interopRequireWildcard(require("@digigov/ui/core/Accordion"));
 
@@ -197,15 +201,23 @@ var _digigov_ui_core_NavList_Nav = _interopRequireWildcard(require("@digigov/ui/
 
 var _digigov_ui_core_NavList_NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
 
-var _digigov_ui_core_NavList_NavListAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto"));
+var _digigov_ui_core_NavList_NavListAuto_NavListAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListAuto"));
 
-var _digigov_ui_core_NavList_NavListBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListBase"));
+var _digigov_ui_core_NavList_NavListAuto_NavListBaseAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto"));
 
-var _digigov_ui_core_NavList_NavListContext = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListContext"));
+var _digigov_ui_core_NavList_NavListAuto_NavListContextAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListContextAuto"));
 
-var _digigov_ui_core_NavList_NavListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItem"));
+var _digigov_ui_core_NavList_NavListAuto_NavListItemAnchorAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListItemAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAuto"));
 
-var _digigov_ui_core_NavList_NavListItemAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemAuto"));
+var _digigov_ui_core_NavList_NavListAuto_NavListItemButtonAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListMenuAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto"));
+
+var _digigov_ui_core_NavList_NavListAuto_NavListSubMenuAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto"));
+
+var _digigov_ui_core_NavList_NavListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItem"));
 
 var _digigov_ui_core_NavList_NavListItemBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemBase"));
 
@@ -213,8 +225,6 @@ var _digigov_ui_core_NavList_NavListItemButton = _interopRequireWildcard(require
 
 var _digigov_ui_core_NavList_NavListItemLink = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemLink"));
 
-var _digigov_ui_core_NavList_NavListSubMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListSubMenu"));
-
 var _digigov_ui_core_NavList_NavMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavMenu"));
 
 var _digigov_ui_core_NavList_NavMenuContainer = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavMenuContainer"));
@@ -301,10 +311,18 @@ var _digigov_ui_govgr = _interopRequireWildcard(require("@digigov/ui/govgr"));
 
 var _digigov_ui_hooks_useDebounce = _interopRequireWildcard(require("@digigov/ui/hooks/useDebounce"));
 
+var _digigov_ui_hooks_useFontSize = _interopRequireWildcard(require("@digigov/ui/hooks/useFontSize"));
+
+var _digigov_ui_hooks_useHighlightLinks = _interopRequireWildcard(require("@digigov/ui/hooks/useHighlightLinks"));
+
 var _digigov_ui_hooks_useKeypress = _interopRequireWildcard(require("@digigov/ui/hooks/useKeypress"));
 
 var _digigov_ui_hooks_useLatest = _interopRequireWildcard(require("@digigov/ui/hooks/useLatest"));
 
+var _digigov_ui_hooks_useLetterSpacing = _interopRequireWildcard(require("@digigov/ui/hooks/useLetterSpacing"));
+
+var _digigov_ui_hooks_useLineHeight = _interopRequireWildcard(require("@digigov/ui/hooks/useLineHeight"));
+
 var _digigov_ui_hooks_useNavList = _interopRequireWildcard(require("@digigov/ui/hooks/useNavList"));
 
 var _digigov_ui_hooks_useOutdatedBrowserCheck = _interopRequireWildcard(require("@digigov/ui/hooks/useOutdatedBrowserCheck"));
@@ -313,7 +331,11 @@ var _digigov_ui_hooks_useSearch = _interopRequireWildcard(require("@digigov/ui/h
 
 var _digigov_ui_hooks_useTheme = _interopRequireWildcard(require("@digigov/ui/hooks/useTheme"));
 
-var _digigov_ui_hooks_useTogglableSections = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableSections"));
+var _digigov_ui_hooks_useTogglableNav = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableNav"));
+
+var _digigov_ui_hooks_useTogglableTab = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableTab"));
+
+var _digigov_ui_hooks_useVariantVars = _interopRequireWildcard(require("@digigov/ui/hooks/useVariantVars"));
 
 var _digigov_ui = _interopRequireWildcard(require("@digigov/ui"));
 
@@ -498,6 +520,7 @@ function lazyImport(pkgImport) {
 }
 
 var _default = {
+  '@digigov/ui/admin/AccessibilityMenu': lazyImport(_digigov_ui_admin_AccessibilityMenu),
   '@digigov/ui/admin/AdminLayout': lazyImport(_digigov_ui_admin_AdminLayout),
   '@digigov/ui/admin/AutoComplete': lazyImport(_digigov_ui_admin_AutoComplete),
   '@digigov/ui/admin/AutoComplete/Status': lazyImport(_digigov_ui_admin_AutoComplete_Status),
@@ -555,7 +578,8 @@ var _default = {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
-  '@digigov/ui/app/ThemeSelectorOptions': lazyImport(_digigov_ui_app_ThemeSelectorOptions),
+  '@digigov/ui/app/ThemeOptionsForm': lazyImport(_digigov_ui_app_ThemeOptionsForm),
+  '@digigov/ui/app/ThemePaletteForm': lazyImport(_digigov_ui_app_ThemePaletteForm),
   '@digigov/ui/core/Accordion': lazyImport(_digigov_ui_core_Accordion),
   '@digigov/ui/core/BackLink': lazyImport(_digigov_ui_core_BackLink),
   '@digigov/ui/core/Base': lazyImport(_digigov_ui_core_Base),
@@ -593,15 +617,18 @@ var _default = {
   '@digigov/ui/core/NavList': lazyImport(_digigov_ui_core_NavList),
   '@digigov/ui/core/NavList/Nav': lazyImport(_digigov_ui_core_NavList_Nav),
   '@digigov/ui/core/NavList/NavList': lazyImport(_digigov_ui_core_NavList_NavList),
-  '@digigov/ui/core/NavList/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto),
-  '@digigov/ui/core/NavList/NavListBase': lazyImport(_digigov_ui_core_NavList_NavListBase),
-  '@digigov/ui/core/NavList/NavListContext': lazyImport(_digigov_ui_core_NavList_NavListContext),
+  '@digigov/ui/core/NavList/NavListAuto/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListBaseAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListContextAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemAnchorAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListItemButtonAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListMenuAuto),
+  '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto_NavListSubMenuAuto),
   '@digigov/ui/core/NavList/NavListItem': lazyImport(_digigov_ui_core_NavList_NavListItem),
-  '@digigov/ui/core/NavList/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListItemAuto),
   '@digigov/ui/core/NavList/NavListItemBase': lazyImport(_digigov_ui_core_NavList_NavListItemBase),
   '@digigov/ui/core/NavList/NavListItemButton': lazyImport(_digigov_ui_core_NavList_NavListItemButton),
   '@digigov/ui/core/NavList/NavListItemLink': lazyImport(_digigov_ui_core_NavList_NavListItemLink),
-  '@digigov/ui/core/NavList/NavListSubMenu': lazyImport(_digigov_ui_core_NavList_NavListSubMenu),
   '@digigov/ui/core/NavList/NavMenu': lazyImport(_digigov_ui_core_NavList_NavMenu),
   '@digigov/ui/core/NavList/NavMenuContainer': lazyImport(_digigov_ui_core_NavList_NavMenuContainer),
   '@digigov/ui/core/NavList/NavMenuContainerContent': lazyImport(_digigov_ui_core_NavList_NavMenuContainerContent),
@@ -645,13 +672,19 @@ var _default = {
   '@digigov/ui/govgr/images/minedu-logo-black-base64': lazyImport(_digigov_ui_govgr_images_minedu_logo_black_base64),
   '@digigov/ui/govgr': lazyImport(_digigov_ui_govgr),
   '@digigov/ui/hooks/useDebounce': lazyImport(_digigov_ui_hooks_useDebounce),
+  '@digigov/ui/hooks/useFontSize': lazyImport(_digigov_ui_hooks_useFontSize),
+  '@digigov/ui/hooks/useHighlightLinks': lazyImport(_digigov_ui_hooks_useHighlightLinks),
   '@digigov/ui/hooks/useKeypress': lazyImport(_digigov_ui_hooks_useKeypress),
   '@digigov/ui/hooks/useLatest': lazyImport(_digigov_ui_hooks_useLatest),
+  '@digigov/ui/hooks/useLetterSpacing': lazyImport(_digigov_ui_hooks_useLetterSpacing),
+  '@digigov/ui/hooks/useLineHeight': lazyImport(_digigov_ui_hooks_useLineHeight),
   '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
   '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
-  '@digigov/ui/hooks/useTogglableSections': lazyImport(_digigov_ui_hooks_useTogglableSections),
+  '@digigov/ui/hooks/useTogglableNav': lazyImport(_digigov_ui_hooks_useTogglableNav),
+  '@digigov/ui/hooks/useTogglableTab': lazyImport(_digigov_ui_hooks_useTogglableTab),
+  '@digigov/ui/hooks/useVariantVars': lazyImport(_digigov_ui_hooks_useVariantVars),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Basic/Aside': lazyImport(_digigov_ui_layouts_Basic_Aside),
   '@digigov/ui/layouts/Basic/Bottom': lazyImport(_digigov_ui_layouts_Basic_Bottom),

package/src/admin/AccessibilityMenu/index.tsx

@@ -0,0 +1,14 @@
+export * from '@digigov/react-extensions/admin/AccessibilityMenu';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuHeader';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuBody';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuList';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuListItem';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+export * from '@digigov/react-core/AccessibilityIcon';
+export * from '@digigov/react-core/AccessibilityTextIcon';
+
+import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
+export default AccessibilityMenu;

package/src/admin/AutoComplete/index.tsx

@@ -61,7 +61,7 @@ export type State = {
   ariaHint: boolean;
 };
 
-export type ΝewQueryProps = { menuOpen?: boolean; query?: string };
+export type NewQueryProps = { menuOpen?: boolean; query?: string };
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
@@ -199,7 +199,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     return suggestionTemplate ? suggestionTemplate(value) : value;
   }
 
-  handleComponentBlur(newState: ΝewQueryProps): void {
+  handleComponentBlur(newState: NewQueryProps): void {
     const { options, query, selected } = this.state;
     let newQuery: string;
     if (this.props.confirmOnBlur) {

package/src/admin/Chip/index.tsx

@@ -3,6 +3,7 @@ export * from '@digigov/react-extensions/admin/ChipHeading';
 export * from '@digigov/react-extensions/admin/ChipSection';
 export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
 export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
+export * from '@digigov/react-extensions/admin/ChipKeyValue';
 
 import Chip from '@digigov/react-extensions/admin/Chip';
 export default Chip;

package/src/admin/Drawer/__stories__/Default.tsx

@@ -11,7 +11,7 @@ import {
   NavMenuContainerContentListItem,
   NavMenuContainerTitle,
 } from '@digigov/ui/core/NavList';
-import { useNavList } from "@digigov/ui/hooks/useNavList";
+import { useNavList } from '@digigov/ui/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
 import { DrawerHeading } from '@digigov/ui/admin/Drawer';
 import { Link } from '@digigov/ui/core';
@@ -59,12 +59,16 @@ const links = [
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
 
-  const { container, register } = useNavList();
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const { container, registerButton, registerLink } = useNavList();
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
+  };
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
   };
 
   const layout = 'vertical';
+  const border = false;
 
   return (
     <Drawer direction="left" open={open}>
@@ -74,15 +78,16 @@ export const Default = () => {
       <NavListAuto
         layout={layout}
         links={links}
+        border={border}
         aria-label="Nav list"
-        role="menu"
       >
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItem
               layout={layout}
               link={item}
-              setRegister={setRegister}
+              setRegisterButton={setRegisterButton}
+              setRegisterLink={setRegisterLink}
             />
             <NavMenu layout={layout} {...container(item.name)}>
               <NavMenuContainer
@@ -94,12 +99,21 @@ export const Default = () => {
                   {item.label}
                 </NavMenuContainerTitle>
                 <NavMenuContainerContent>
-                  <NavMenuContainerContentList layout={layout}>
+                  <NavMenuContainerContentList role="menu" layout={layout}>
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
                         isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem key={menuIndex}>
-                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          <NavMenuContainerContentListItem
+                            key={menuIndex}
+                            role="presentation"
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
                           </NavMenuContainerContentListItem>
                         )
                       );

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -39,7 +39,7 @@ export const AlignRight = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">
             Επεξεργασία
@@ -51,7 +51,7 @@ export const AlignRight = () => (
             Οριστική διαγραφή
           </NavVerticalItem>
         </NavVertical>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <Button role="menuitem">Ενέργεια</Button>
       </DropdownContent>
     </Dropdown>

package/src/admin/Dropdown/__stories__/Default.tsx

@@ -32,7 +32,7 @@ export const Default = () => (
           <TextInput name="input-name" />
         </LabelContainer>
       </FieldContainer>
-      <SectionBreak visible role="separator" />
+      <SectionBreak role="separator" />
       <NavVertical role="menu">
         <NavVerticalItem role="menuitem" href="#">
           Επεξεργασία
@@ -44,7 +44,7 @@ export const Default = () => (
           Οριστική διαγραφή
         </NavVerticalItem>
       </NavVertical>
-      <SectionBreak visible role="separator" />
+      <SectionBreak role="separator" />
       <Button role="menuitem">Ενέργεια</Button>
     </DropdownContent>
   </Dropdown>

package/src/admin/Dropdown/__stories__/PlacementTop.tsx

@@ -39,7 +39,7 @@ export const PlacementTop = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <NavVertical role="menu">
           <NavVerticalItem role="menuitem" href="#">
             Επεξεργασία
@@ -51,7 +51,7 @@ export const PlacementTop = () => (
             Οριστική διαγραφή
           </NavVerticalItem>
         </NavVertical>
-        <SectionBreak visible role="separator" />
+        <SectionBreak role="separator" />
         <Button role="menuitem">Ενέργεια</Button>
       </DropdownContent>
     </Dropdown>

package/src/admin/FilterSection/index.tsx

@@ -1,6 +1,5 @@
 export * from '@digigov/react-extensions/admin/FilterSection';
-export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
-export * from '@digigov/react-extensions/admin/FilterHeadingSection';
+export * from '@digigov/react-extensions/admin/FilterHeading';
 export * from '@digigov/react-extensions/admin/FilterContent';
 export * from '@digigov/react-extensions/admin/FilterOptionsSection';
 export * from '@digigov/react-extensions/admin/FilterSelectedHeading';

package/src/admin/Modal/index.tsx

@@ -42,46 +42,50 @@ export const useModal = (): {
   };
 };
 
-export const Modal = (props: ModalProps): React.ReactElement | null => {
-  if (props.open) {
-    return <ModalBase {...props} />;
-  } else {
-    return null;
+export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
+  function Modal({ ...props }, ref) {
+    if (props.open) {
+      return <ModalBase ref={ref} {...props} />;
+    } else {
+      return null;
+    }
   }
-};
+);
 
-export const ModalBase = ({
-  open,
-  children,
-  onEscape,
-  ...props
-}: ModalProps): React.ReactElement => {
-  const firstModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
-  const lastModalElement = useRef() as React.MutableRefObject<HTMLSpanElement>;
-  const handleFocus = useCallback(() => {
-    firstModalElement.current.focus();
-  }, []);
-  useKeypress('Escape', onEscape);
-  useEffect(() => {
-    handleFocus();
-    lastModalElement.current.addEventListener('focus', handleFocus);
-    return () => {
-      lastModalElement.current.removeEventListener('focus', handleFocus);
-    };
-  }, [open]);
-  return (
-    <ModalContainer
-      open={open}
-      role="dialog"
-      {...props}
-      aria-hidden="false"
-      aria-modal="true"
-    >
-      <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
-      {open && children}
-      <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
-    </ModalContainer>
-  );
-};
+export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
+  function ModalBase({ open, children, onEscape, ...props }, ref) {
+    const firstModalElement = useRef() as React.MutableRefObject<
+      HTMLSpanElement
+    >;
+    const lastModalElement = useRef() as React.MutableRefObject<
+      HTMLSpanElement
+    >;
+    const handleFocus = useCallback(() => {
+      firstModalElement.current.focus();
+    }, []);
+    useKeypress('Escape', onEscape);
+    useEffect(() => {
+      handleFocus();
+      lastModalElement.current.addEventListener('focus', handleFocus);
+      return () => {
+        lastModalElement.current.removeEventListener('focus', handleFocus);
+      };
+    }, [open]);
+    return (
+      <ModalContainer
+        open={open}
+        role="dialog"
+        ref={ref}
+        {...props}
+        aria-hidden="false"
+        aria-modal="true"
+      >
+        <span tabIndex={-1} ref={firstModalElement} aria-hidden="true" />
+        {open && children}
+        <span tabIndex={0} ref={lastModalElement} aria-hidden="true" />
+      </ModalContainer>
+    );
+  }
+);
 
 export default Modal;