@digigov/ui 0.30.3 → 0.32.0

package/{esm/core/NavList/__stories__/NavHorizontalLayout.js → es/core/NavList/__stories__/NavVerticalLayout.js}

@@ -29,48 +29,54 @@ var links = [{
   href: '#',
   label: 'Nav list item 3'
 }];
-export var NavHorizontalLayout = function NavHorizontalLayout() {
-  var layout = 'horizontal';
+export var NavVerticalLayout = function NavVerticalLayout() {
+  var layout = 'vertical';
+  var border = false;
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return _extends({}, registerLink(name));
   };
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: layout
-  }, links.map(function (item, key) {
+    layout: layout,
+    border: border
+  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement(NavListItem, {
-      layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/React.createElement(NavMenu, _extends({
       layout: layout
     }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
-      layout: layout
-    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      layout: layout
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
       return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+        role: "presentation",
         key: menuIndex
       }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));
   })));
 };
-export default NavHorizontalLayout;
+export default NavVerticalLayout;

package/es/core/NavList/index.js

@@ -1,11 +1,9 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
-export * from '@digigov/ui/core/NavList/NavListAuto';
-export * from '@digigov/ui/core/NavList/NavListItemAuto';
-export * from '@digigov/ui/core/NavList/NavListSubMenu';
-export * from '@digigov/ui/core/NavList/NavListContext';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';
 export * from '@digigov/ui/core/NavList/NavList';
-export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListItemLink';
 export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';

package/es/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories.js

@@ -0,0 +1,12 @@
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+export default {
+  title: 'Digigov UI/core/SingleCharacterInputContainer',
+  description: 'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
+  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
+  component: SingleCharacterInputContainer,
+  displayName: 'SingleCharacterInputContainer'
+};
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/Default';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithDefaultError';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit';

package/es/core/SingleCharacterInputContainer/__stories__/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF"), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: 5
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  value: 1
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  value: 2
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  value: 3
+}))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/core/SingleCharacterInputContainer/__stories__/WithDefaultError.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C5\u03C0\u03BF\u03C7\u03C1\u03B5\u03C9\u03C4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  error: true
+}))));
+
+export var WithDefaultError = function WithDefaultError() {
+  return _ref;
+};
+export default WithDefaultError;

package/es/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03B9 \u03BB\u03AC\u03B8\u03BF\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: 4,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: 4,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: 5,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  value: 1,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  value: 2,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  value: 3,
+  error: true
+}))));
+
+export var WithErrorMessageInvalidCode = function WithErrorMessageInvalidCode() {
+  return _ref;
+};
+export default WithErrorMessageInvalidCode;

package/es/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF"), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03B9 \u03BB\u03B9\u03B3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03B1\u03C0\u03CC 6 \u03C8\u03B7\u03C6\u03AF\u03B1.."), /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: "6"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: "4"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: "5"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  error: true
+}))));
+
+export var WithErrorMessageLessDigit = function WithErrorMessageLessDigit() {
+  return _ref;
+};
+export default WithErrorMessageLessDigit;

package/es/core/SingleCharacterInputContainer/index.js

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputContainer';
+export * from '@digigov/react-core/SingleCharacterInputItem';
+import SingleCharacterInputContainer from '@digigov/react-core/SingleCharacterInputContainer';
+export default SingleCharacterInputContainer;

package/es/core/SingleCharacterInputContainer/index.mdx

@@ -0,0 +1,29 @@
+---
+id: otp-input
+title: SingleCharacterInputContainer
+---
+
+# SingleCharacterInputItem
+
+```bash
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="Default.tsx"
+/>
+
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="WithDefaultError.tsx"
+/>

package/es/core/Tabs/__stories__/Default.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/core/Tabs';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
 import { Link } from '@digigov/ui/core/Link';
 
-var _ref = /*#__PURE__*/React.createElement(Title, {
-  size: "md",
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
@@ -14,8 +14,8 @@ var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/Rea
   href: "#"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
-var _ref3 = /*#__PURE__*/React.createElement(Title, {
-  size: "md",
+var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
 

package/es/core/Tabs/index.js

@@ -3,12 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["register", "opened"];
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+import { useTogglableTab } from '@digigov/ui/hooks/useTogglableTab';
 export var useTabs = function useTabs() {
   var registeredPanels = useRef({});
   var goTo = useCallback(function (key) {
-    console.log(registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop);
-
     if (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop >= 30) {
       var _registeredPanels$cur;
 
@@ -19,7 +17,7 @@ export var useTabs = function useTabs() {
     }
   }, []);
 
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableTab = useTogglableTab({
     singleOpen: true,
     toggleProperty: 'selected',
     onToggleProperty: 'onClick',
@@ -27,9 +25,9 @@ export var useTabs = function useTabs() {
     ariaNavigation: true,
     toggleHook: goTo
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+      register = _useTogglableTab.register,
+      opened = _useTogglableTab.opened,
+      rest = _objectWithoutProperties(_useTogglableTab, _excluded);
 
   var panel = useCallback(function (key) {
     return {

package/es/hooks/useFontSize.js

@@ -0,0 +1,10 @@
+import useVariantVars from "@digigov/ui/hooks/useVariantVars";
+export var useFontSize = function useFontSize() {
+  var config = {
+    'name': 'font-size',
+    'variables': ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl'],
+    'variants': ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useFontSize;

package/es/hooks/useHighlightLinks.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+export var useHighlightLinks = function useHighlightLinks() {
+  var storedHighlightLinks = localStorage.getItem('--theme-highlight-links');
+
+  var _useState = useState(storedHighlightLinks || 'default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      highlightLinks = _useState2[0],
+      changeHighlightLinks = _useState2[1];
+
+  useEffect(function () {
+    if (highlightLinks === 'highlight') {
+      document.documentElement.classList.add("govgr-highlight-links");
+    } else {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    }
+
+    localStorage.setItem('--theme-highlight-links', highlightLinks);
+  }, [highlightLinks]);
+  useEffect(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      document.documentElement.classList.add(localStorage.getItem('--theme-highlight-links') === 'highlight' ? "govgr-highlight-links" : '');
+    };
+
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return [highlightLinks, changeHighlightLinks];
+};
+export default useHighlightLinks;

package/es/hooks/useLetterSpacing.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLetterSpacing = function useLetterSpacing() {
+  var config = {
+    name: 'letter-spacing',
+    variables: ["letter-spacing-normal", "letter-spacing-wide", "letter-spacing-wider", "letter-spacing-widest"],
+    variants: ['default', 'extra']
+  };
+  return useVariantVars(config);
+};
+export default useLetterSpacing;

package/es/hooks/useLineHeight.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLineHeight = function useLineHeight() {
+  var config = {
+    name: 'line-height',
+    variables: ["line-h-sm", "line-h-base", "line-h-lg", "line-h-xl", "line-h-2xl", "line-h-3xl", "line-h-4xl", "line-h-5xl"],
+    variants: ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useLineHeight;

package/es/hooks/useNavList.js

@@ -1,21 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["register", "opened"];
+var _excluded = ["registerButton", "registerLink", "opened"];
+import { useTogglableNav } from '@digigov/ui/hooks/useTogglableNav';
 import { useCallback, useRef } from 'react';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
 export var useNavList = function useNavList() {
   var registeredContainers = useRef({});
 
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableNav = useTogglableNav({
     singleOpen: true,
     toggleOpenClose: true,
+    toggleParentOpen: true,
     toggleProperty: 'active',
     onToggleProperty: 'onClick',
     ariaNavigation: true
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+      registerButton = _useTogglableNav.registerButton,
+      registerLink = _useTogglableNav.registerLink,
+      opened = _useTogglableNav.opened,
+      rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
   var container = useCallback(function (key) {
     return {
@@ -29,7 +31,8 @@ export var useNavList = function useNavList() {
     };
   }, [opened]);
   return _extends({
-    register: register,
+    registerButton: registerButton,
+    registerLink: registerLink,
     opened: opened,
     container: container
   }, rest);

package/es/hooks/useTheme.js

@@ -1,9 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useEffect } from 'react';
-;
 export var useTheme = function useTheme() {
   var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  var storedTheme = localStorage.getItem('theme');
+  var storedTheme = localStorage.getItem('--theme-palette');
 
   var _useState = useState(storedTheme || 'auto'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11,21 +10,33 @@ export var useTheme = function useTheme() {
       changeTheme = _useState2[1];
 
   useEffect(function () {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
+
     if (theme === 'auto') {
-      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
     } else {
-      document.documentElement.className = theme;
+      document.documentElement.classList.add(theme);
     }
 
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('--theme-palette', theme);
   }, [theme]);
   useEffect(function () {
     var beforePrintListener = function beforePrintListener() {
-      document.documentElement.className = 'light';
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
     };
 
     var afterPrintListener = function afterPrintListener() {
-      document.documentElement.className = localStorage.getItem('theme') || theme;
+      document.documentElement.classList.remove('light');
+      var localtheme;
+
+      if (localStorage.getItem('--theme-palette') === 'auto') {
+        localtheme = prefersDarkScheme ? 'dark' : 'light';
+      } else {
+        localtheme = localStorage.getItem('--theme-palette');
+      }
+
+      document.documentElement.classList.add(localtheme || theme);
     };
 
     window.addEventListener('beforeprint', beforePrintListener);
@@ -35,9 +46,6 @@ export var useTheme = function useTheme() {
       window.removeEventListener('afterprint', afterPrintListener);
     };
   }, []);
-  return {
-    theme: theme,
-    changeTheme: changeTheme
-  };
+  return [theme, changeTheme];
 };
 export default useTheme;